Як запобігти обробці подій за замовчуванням у методі onclick?


88

Як запобігти замовчуванню в методі onclick? У мене є метод, при якому я також передаю власне значення

<a href="#" onclick="callmymethod(24)">Call</a>
function callmymethod(myVal){
    //doing custom things with myVal
    //here I want to prevent default
}

Відповіді:


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.
Лінус Клін

1
Будь ласка, дивіться відповідь нижче! "На мою думку, відповідь неправильна! Він попросив event.preventDefault (); коли ви просто повертаєте false; воно викликає event.preventDefault (); І event.stopPropagation (); також!"
Равіндранат Акіла

1
Щоб бути вибагливим, у запитанні OP ніколи не згадується preventDefault, питання полягає в тому, як "запобігти [типовому] натисканню" .
Лінус Клін

1
@LinusKleen, також скажи, будь ласка, як у цьому випадку
запобігти клацанню

1
@vp_arth Використовуйте для цього "CSS click through". Подивіться на це питання .
Лінус Клін

46

На мій погляд відповідь неправильна! Він просив, event.preventDefault();коли ви просто повернете неправду; він дзвонить event.preventDefault();І 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();
}

6
Ви покладаєтесь на те, window.eventщо не завжди доступне у всіх браузерах.
Лінус Клін

Відредаговано для додавання: event = event || window.event;
Nigel

45

Спробуйте це (але, будь ласка, використовуйте кнопки для таких випадків, якщо у вас немає дійсного hrefзначення для витонченої деградації )

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

1
приємно просто найкраще. Я хочу те саме це для event.preventDefault ();
Самер Казі

Це спрацювало для мене, але чи можете ви пояснити, чому ви повинні return false;? До чого ми взагалі повертаємо неправду?
Каньйон Колоб

ви можете просто повернути замість return false, повернення уникне навігації посиланням на href. Технічно ми повинні використовувати кнопку для таких випадків.
Aamir Afridi

12

Ви можете зловити подію, а потім заблокувати її за допомогою prevenDefault () - працює з чистим 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>



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>


-3

Надайте елементу клас або ідентифікатор і використовуйте функцію jquery unbind ();

$(".slide_prevent").click(function(){
                $(".slide_prevent").unbind();
              });
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.