防止默认在功能中不起作用

prevent default is not working in function

本文关键字：不起作用 功能 默认      更新时间：2023-09-26

我正试图添加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()

这里的

小提琴

  1. 使用No wrap选项从Jsfiddle左面板，通过选择这个选项将使功能makePaidModalView全局，否则它将被包裹在load或DOMContentLoded回调，不能从HTML访问。
  2. 使用event作为事件处理程序中的事件参数的名称。由于evnt没有定义，undefined将被传递给函数，当试图访问undefined.
    3. 上的方法时会抛出错误。最好不要使用内联事件。使用addEventListener从Javascript中绑定元素的事件。
  3. 如果你在页面上加载了jQuery，你可以使用jQuery的on方法来绑定事件。
  4. 使用data-*自定义属性将与元素相关的数据存储在元素本身。你可以使用data('dataName')从JS中访问它。

更新小提琴 

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

可以使用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>

相关文章：