防止默认功能不起作用

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

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>