禁用指针事件后，1个最后的mouseout触发

1 final mouseout fires after pointer-events disabled

本文关键字：1个 最后的 mouseout 触发 指针 事件      更新时间：2023-09-26

我的场景是听'click'&'mouseout’事件。当click事件触发时，会在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!');
};

我认为鼠标样式的指针与实际事件的触发相混淆。

你所做的似乎只是隐藏鼠标指针。如果要禁用单击或鼠标事件，则必须通过附加事件侦听器来实现。监听事件并添加

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

如果您使用的是jQuery

删除代码中的反引号，改为使用单引号。

更新的CodePen

console.clear();
let div = document.querySelector('div');
div.onclick = function() {
    console.log('click!');
    div.classList.add('nopointer');
};
div.onmouseout = function() {
  console.log('mouseout!');
};

编辑：

重置onclick处理程序中的mouseout事件处理程序：

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

编辑的CodePen

此外，您还可以使用指向div本身的this关键字来进一步改进代码：

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

您可以使用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);
相关文章：