Как предотвратить обработку событий по умолчанию в методе onclick?

88

Как предотвратить дефолт в методе onclick? У меня есть метод, в котором я также передаю настраиваемое значение

<a href="#" onclick="callmymethod(24)">Call</a>
function callmymethod(myVal){
    //doing custom things with myVal
    //here I want to prevent default
}
coure2011
источник

Ответы:

106

Позвольте вашему обратному вызову вернуться falseи передать его onclickобработчику:

<a href="#" onclick="return callmymethod(24)">Call</a>

function callmymethod(myVal){
    //doing custom things with myVal
    //here I want to prevent default
    return false;
}

Однако для создания поддерживаемого кода вам следует воздержаться от использования «встроенного Javascript» (т.е. кода, который находится непосредственно в теге элемента) и изменить поведение элемента с помощью включенного исходного файла Javascript (он называется ненавязчивым Javascript ).

Наценка:

<a href="#" id="myAnchor">Call</a>

Код (отдельный файл):

// Code example using Prototype JS API
$('myAnchor').observe('click', function(event) {
    Event.stop(event); // suppress default click behavior, cancel the event
    /* your onclick code goes here */
});
Линус Клин
источник
1
@AamirAfridi Да, работает. Вам следует настроить скрипку и перейти onLoadedна no wrap. Или вместо этого просто напишите свою собственную разметку .html.
Linus Kleen
1
См. Ответ ниже! «На мой взгляд, ответ неверен! Он попросил event.preventDefault (); когда вы просто возвращаете false; он вызывает event.preventDefault (); И event.stopPropagation (); тоже!»
Равиндранат Акила
1
Чтобы быть разборчивым, вопрос ОП никогда не упоминается preventDefault, вопрос в том, как «предотвратить щелчок по умолчанию» .
Linus Kleen 03
1
@LinusKleen, скажите также, пожалуйста, как предотвратить щелчок в этом случае
vp_arth
1
@vp_arth Используйте для этого "CSS click through". Посмотри на этот вопрос .
Linus Kleen
46

На мой взгляд, ответ неверен! Он просил, event.preventDefault();когда вы просто возвращаете false; он также вызывает event.preventDefault();AND event.stopPropagation();!

Вы можете решить это следующим образом:

<a href="#" onclick="callmymethod(event, 24)">Call</a>
function callmymethod(e, myVal){
    //doing custom things with myVal

    //here I want to prevent default
    e = e || window.event;
    e.preventDefault();
}
Wawa
источник
6
Вы полагаетесь на то, window.eventчто не всегда доступно в браузерах.
Linus Kleen 03
Отредактировано для добавления: event = event || window.event;
Nigel Fds
45

Попробуйте это (но, пожалуйста, используйте кнопки в таких случаях, если у вас нет допустимого hrefзначения для постепенной деградации )

<a href="#" onclick="callmymethod(24); return false;">Call</a>
Амир Африди
источник
1
приятно просто лучше всего. Я хочу то же самое для event.preventDefault ();
Самир Кази
У меня это сработало, но не могли бы вы объяснить, зачем вам это нужно return false;? К чему мы вообще возвращаем ложь?
Каньон Колоб
вы можете просто return вместо return false, возврат позволит избежать перехода по ссылке к href. Технически мы должны использовать кнопку для таких случаев.
Aamir Afridi
12

Вы можете поймать событие, а затем заблокировать его с помощью preventDefault () - работает с чистым Javascript

document.getElementById("xyz").addEventListener('click', function(event){
    event.preventDefault();
    console.log(this.getAttribute("href"));
    /* Do some other things*/
});
Андреас Карц
источник
11

Просто поместите "javascript: void (0)" вместо "#" в теге href.

<a href="javascript:void(0);" onclick="callmymethod(24)">Call</a>
Рафай
источник
9

Это сработало для меня

<a href="javascript:;" onclick="callmymethod(24); return false;">Call</a>
Pixelomo
источник
0

Было бы слишком утомительно изменять использование функций на всех html-страницах на return false.

Итак, вот протестированное решение, которое исправляет только саму функцию:

function callmymethod(myVal) {
    // doing custom things with myVal

    // cancel default event action
    var event = window.event || callmymethod.caller.arguments[0];
    event.preventDefault ? event.preventDefault() : (event.returnValue = false);

    return false;
}    

Это правильно предотвращает посещение IE6, IE11 и последней версии Chrome href="#"после завершения обработчика событий onclick.

Кредиты:

Вадим
источник
0

Если нужно поместить в тег. Не лучшее решение, но оно сработает.

Убедитесь, что вы поместили событие onclick перед href. Работал только у меня так.

<a onclick="return false;" href="//www.google.de">Google</a>
Матикс
источник
0

Другой способ сделать это - использовать eventобъект внутри атрибута onclick(без необходимости добавлять в функцию дополнительный аргумент для передачи события)

function callmymethod(myVal){
    console.log(myVal);
}
<a href="#link" onclick="event.preventDefault();callmymethod(24)">Call</a>

h3t1
источник
-3

Дайте класс или идентификатор элементу и используйте функцию jquery unbind ();

$(".slide_prevent").click(function(){
                $(".slide_prevent").unbind();
              });
user46487
источник