Question

<button type="button">Click Me!</button> 

<script>   
    document.getElementsByTagName('button')[0].addEventListener('click', function(e {
        e.preventDefault();
        alert('hello1');
    }, false);
</script>

我想了解e.preventDefault();，我知道如果调用此方法，则不会触发事件的默认操作。所以我的问题是：

对于上述代码，似乎e.preventDefault();在这里没有做任何事情。那么上述事件的默认操作是什么：getElementsByTagName('button')[0].click？

Answer 1

HTML5中的元素的默认操作在HTML5规范中定义。 interactive content section描述了如何响应交互，包括激活（单击）事件是否被取消时要执行的操作，以及各个交互元素（在本节顶部列出）已定义激活行为。 activation behaviour for <button>说（重点补充）：

当未禁用按钮元素时，其激活行为元素将运行以下列表中定义的步骤，以获取元素类型属性的当前状态：

提交按钮

如果元素具有表单所有者，则该元素必须从button元素提交表单所有者。

重置按钮

如果元素具有表单所有者，则该元素必须重置表单所有者。

按钮

什么都不做。

Answer 2

e.preventDefault（）可防止事件进一步向上移动。例如，在上面的代码中，如果元素上有onclick处理程序，那么在没有e.preventDefault（）的情况下，将调用元素的onclick处理程序。按钮的onclick事件将始终被触发，因为你无法阻止已发生的事情，但你可以停止尚未发生的事件 - 在这种情况下是身体的onclick事件。

e.preventDefault（）如何;如果事件是js中的button.click？

2 个答案: