防止默认功能不起作用

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

使用 Jsfiddle 左侧面板中的 No wrap 选项，通过选择此选项将使函数 makePaidModalView 成为全局函数，否则它将被包裹在 load 或 DOMContentLoded 中回调，无法从 HTML.
使用 event 作为事件处理程序中事件参数的名称。由于 evnt 未定义，undefined 将被传递给函数，并且在尝试访问 undefined.
最好不要使用内联事件。使用 addEventListener 将事件绑定到来自 Javascript.
如果页面加载了jQuery，可以使用jQuery的on方法绑定事件。
使用data-* 自定义属性将与元素相关的数据存储在元素本身上。您可以使用 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>

旁注： 在使用 jQuery 时，您还可以在事件处理程序中使用 return false; 来防止元素的默认操作并停止事件冒泡 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>

防止默认功能不起作用

prevent default is not working in function

javascript

jquery

preventdefault