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

＆＃13;

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

＆＃13;

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

＆＃13;

使用带有on自定义属性的jQuery data-*在元素上存储数据。

＆＃13;

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

＆＃13;

<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>

＆＃13;

旁注：在使用jQuery时，您还可以使用事件处理程序中的return false;来阻止元素的默认操作，并阻止事件冒泡DOM。

Answer 2

您可以使用addEventListener()在特定事件上绑定您的函数。像

这样的东西

＆＃13;

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

＆＃13;

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

＆＃13;

防止默认不起作用

2 个答案: