0

私のシナリオは、div で「クリック」および「マウスアウト」イベントをリッスンすることです。クリック イベントが発生すると、ポインター イベントを無効にするクラスが div に追加されます。これは、ポインター イベントが無効になった後に 1 つの最後の 'mouseout' イベントが発生することを除いて機能します。理由/修正方法はありますか？

http://codepen.io/BradLee/pen/grzrOz

/* style */
.nopointer{
    pointer-events: none;
}


let div = document.querySelector(`div`);

div.onclick = function() {
    console.log('click!');
    div.classList.add(`nopointer`);

};

div.onmouseout = function() {
  console.log('mouseout!');
};
4

3 に答える 3

1

実際のイベントの発生と混同されたマウススタイルのポインターを取得していると思います。

あなたがしているように見えるのは、マウスポインターを隠しているだけです。クリックまたはマウス イベントを無効にする場合は、イベント リスナーをアタッチして無効にする必要があります。イベントをリッスンして追加する

document.on("mouseleave","#elementid",function(e){
    e.preventDefault();
}

jQueryを使用している場合

于 2016-04-15T23:21:38.590 に答える
1

コード内のバックティックを削除し、代わりに一重引用符を使用してください。

更新された CodePen

console.clear();

let div = document.querySelector('div');

div.onclick = function() {
    console.log('click!');
    div.classList.add('nopointer');

};

div.onmouseout = function() {
  console.log('mouseout!');
};

編集：

mouseoutハンドラーでイベント ハンドラーをリセットしonclickます。

div.onclick = function() {
    console.log('click!');
    div.classList.add('nopointer');
    div.onmouseout = undefined;
};

編集された CodePen

また、それ自体thisを指すキーワードを使用して、コードをさらに改善できます。div

div.onclick = function() {
    console.log('click!');
    this.classList.add('nopointer');
    this.onmouseout = undefined;
};
于 2016-04-15T23:23:56.103 に答える
0

次のように addEventListener および removeEventListener 関数を使用できます。

let div = document.querySelector('div');

div.onclick = function() {
    console.log('click!');
    this.classList.add('nopointer');
    div.removeEventListener("mouseleave", mymouseout);
};

function mymouseout() {
  console.log('mouseout!');
}

div.addEventListener("mouseleave", mymouseout);
于 2016-04-15T23:51:18.443 に答える