Question

我的情景是我听'点击'＆amp; div上的'mouseout'事件。触发click事件时，会向div添加一个类以禁用指针事件。除了在禁用指针事件后触发1个最终'mouseout'事件之外，这个工作正常。任何想法为什么/如何解决？

/* 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

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

Updated 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;
};

Edited 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);

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

3 个答案: