1 заключительная мышка срабатывает после отключения событий указателя

Question

Мой сценарий заключается в том, что я слушаю события "click" и "mouseout" в div. Когда срабатывает событие 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!');
};

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