15

jqueryなし

基本的に私が探しているのは、カウントダウンが終了したときにマウスがdivの上にあるかどうかを確認する機能です

ユーザーが div を超えている場合は、その div に対してアクションを実行します

onmouseoverマウスがdivのしきい値を超えたときにのみトリガーされます。マウスが移動していない場合はトリガーされないため、機能しません

特定の時点でマウスがdivの上にあるかどうか、開始点から移動したかどうかを判断する必要があります

私の狩りはすべて見つけただけでonmousover、そもそもネズミがたまたまそこにいたかどうかを確認するものは何もありません

divの全体的な座標を決定し、マウスの座標をマップしてそこに収まるかどうかを確認するJavaScriptのスキルがありません...これが私がする必要があると信じていることです

4

5 に答える 5

11

フラグを onmouseover で true に設定し、onmouseleave で false に設定します。フラグが true の場合、カウントダウンが終了すると要素が終了します。

HTML

<div id="div-name">the section of the code i am working with has a countdown timer, when it reaches 0 i need to know if the mouse is over a specific box</div>
<button id="notification" onclick="javascript: letsCountIt(5);">click to start countdown</button>

JS

window.ev = false;

document.getElementById('div-name').onmouseover = function () {
    window.ev = true;
    console.log(window.ev);
}

document.getElementById('div-name').onmouseout = function () {
    window.ev = false;
    console.log(window.ev);
}

window.letsCountIt = function (cdtimer) {
    cdtimer--;
    document.getElementById('notification').innerHTML = cdtimer;

    if (cdtimer == 0) {
        if (window.ev === true) {
            alert('over');
        } else {
            alert('not over');
        }
    } else {
        setTimeout(function(){letsCountIt(cdtimer);}, 1000);
    }
}
于 2013-08-19T18:05:01.600 に答える
0

このコードは機能しますが、ページの読み込み後にマウスを 1 回移動する必要があります。

var coords;
var getMouseCoordinates = function (e) {
    'use strict';
    return {
        x: e.clientX,
        y: e.clientY
    };
};

document.addEventListener('mousemove', function (e) {
    coords = getMouseCoordinates(e);
}, false);

document.addEventListener('click', function () {
    var divCoords = document.getElementById('t').getBoundingClientRect();

    if (coords.x >= divCoords.left && coords.x <= divCoords.right && coords.y >= divCoords.top && coords.y <= divCoords.bottom) {
        alert('Mouse in box');
    } else {
        alert('Mouse not in box');
    }
}, false);

clickのイベントにバインドするのdocumentではなく、カウントダウンの終了イベントにバインドします。

ここに例があります。出力ウィンドウをクリックしてみてください。

于 2013-08-19T18:22:47.093 に答える