предотвратить по умолчанию не работает функция

Question

Я пытаюсь добавить preventDefault() для функции, как показано ниже:

HTML:

<a href="#" id="makePaid" onclick="makePaidModalView(1, evnt)">Make Paid</a> 

Javascript:

function makePaidModalView(id, e) { 
    e.preventDefault(); 
    alert(id); 
} 

Но он ничего не предупреждая , Консоль говорит ReferenceError: e is not defined. Как добавить preventDefault() в эту функцию?

FIDDLE HERE

Answer 1

1. Используйте No wrap вариант из Jsfiddle левой панели, выбрав эту опцию, сделает функцию makePaidModalView глобальной, в противном случае он будет обернут в load или DOMContentLoded обратном вызове и не может быть доступен из HTML.
2. Использовать event как имя параметра события из обработчика события. Поскольку evnt не определен, undefined будет передан функции, и при попытке доступа к методу будет вызвана ошибка при вызове метода undefined.
3. Лучше не использовать встроенные события. Используйте addEventListener для привязки событий к элементу из Javascript.
4. Если у вас загружен jQuery на странице, вы можете использовать метод jQuery on для привязки событий.
5. Используйте data-* пользовательские атрибуты для хранения данных, связанных с элементом самого элемента. Вы можете получить доступ к этому из JS, используя data('dataName').

Updated Fiddle

function makePaidModalView(id, e) { 
 
    e.preventDefault(); 
 
    //console.log(id) 
 
    alert(id); 
 
}

<a href="#" id="makePaid" onclick="makePaidModalView(1, event)">Make Paid</a>

---

Использование JQuery on с data-* пользовательских атрибутов для хранения данных на элементе.

$(document).ready(function() { 
 
    $('#makePaid').on('click', function(e) { 
 
    alert($(this).data('id')); 
 
    e.preventDefault(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<a href="#" id="makePaid" data-id="1">Make Paid</a>

Sidenote: Вы также можете использовать return false; из обработчика события, когда с помощью JQuery, чтобы предотвратить действие элемента по умолчанию, а также остановить событие от бурлит в DOM.

Answer 2

Вы можете использовать addEventListener() для привязки функции к определенному событию. Что-то вроде

document.getElementById('makePaid').addEventListener('click', function(event) { 
 
    makePaidModalView(this.dataset.id, event); 
 
}); 
 

 
function makePaidModalView(id, e) { 
 
    e.preventDefault(); 
 
    alert(id); 
 
}

<a href="#" id="makePaid" data-id=1>Make Paid</a>