Javascript: Остановить onClick default

Question

У меня такое ощущение, что у меня что-то не хватает, но я просто вижу его.

Триггер на событие щелчка устанавливается:

anchor.addEventListener("click", myClickEvent); 
 

 
function myClickEvent() { 
 
    this.preventDefault(); // fails 
 
    return false; 
 
}

Однако метод OnClick по умолчанию все еще происходит.

Могу ли я аннулировать стандартную связь в то же время, что и addEventListener, или есть какой-то другой способ сделать это. Я не могу использовать .preventDefault() из myClickEvent, потому что событие недоступно в этой точке.

Редактировать следующие комментарии для наглядности: По умолчанию onClick тега происходит, хотя myClickEvent возвращает false.

Answer 1

Возврат false из обработчика, зарегистрированного с помощью addEventListener, ничего не делает. См https://stackoverflow.com/a/1357151/227299 и https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Рекомендуемый способ вызвать event.preventDefault()

function myClickEvent(e) { 
    e.preventDefault() 
} 

Обработчиков из HTML атрибутов все еще работает, но вы не должны использовать его, так как это не так ясно, что return false означает, по сравнению с event.preventDefault() (не позволяют ссылка последует) и event.stopPropagation() (не говоря пузырь события вверх)

Answer 2

element.addEventListener("click", myClickEvent); 

function myClickEvent(event) { 
    event.preventDefault(); 
    return false; 
} 

Answer 3

Там нет такой функции в глобальном масштабе preventDefault - вам нужно использовать событие, которое было передано в ваш обратный вызов.

Также убедитесь, что вы прикрепляете событие к чему-то, на что можно нажать (форма, якорь, кнопка и т. Д.), Чтобы мог потенциально предотвратить событие.

Если вы присоедините событие к дочернему/родительскому элементу, то ничего не будет работать так, как вы ожидали.

Answer 4

Почти там, благодаря коду Teemu, но не совсем.

Существует разница в зависимости от того, как вызывается функция. Казалось бы, есть и скрытый параметр послал определения значения «это» и при вызове без параметров автоматического объекта события отправляется в качестве первого параметра:

Вызов без параметров:

anchor.addEventListener("click", myClickEvent); 
 

 
function myClickEvent(param1, param2) { 
 
    // this = events parent element (<a>) 
 
    // this.href = <a href=...> 
 
    // param1 = event object 
 
    // param2 = undefined 
 
    oEvent = param1; 
 
    oEvent.preventDefault(); 
 
}

но затем вызвать его с параметрами:

anchor.addEventListener("click", function (oEvent) { myClickEvent(oEvent, myParameter); }); 
 

 
function myClickEvent(param1, param2) { 
 
    // this = [object Window] 
 
    // this.href = undefined 
 
    // param1 = event object 
 
    // param2 = myParameter 
 
    oEvent = param1; 
 
    oEvent.preventDefault(); 
 
}

Обратите внимание, как, когда пар аметры отправляются вручную, значение «this» изменяется из родительского элемента событий в «[окно объекта]», заставляя this.href ошибиться.

Однако функция preventDefault теперь работает надежно.