javascript - 1 在禁用指针事件后触发最终鼠标移出

Question

我的场景是我在 div 上听“click”和“mouseout”事件。当点击事件触发时，一个类被添加到 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!');
};

Answer 1

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

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

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

如果你使用 jQuery

Answer 2

删除代码中的反引号并改用单引号。

更新了 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;
};

Answer 3

您可以像这样使用 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);