javascript - How and when to use preventDefault()?

Question

From this tutorial, it is said:

preventDefault(); does one thing: It stops the browsers default behaviour.

I searched online for the examples of preventDefault(), I can only see in two situations (link, form) we use preventDefault(): Prevent a submit button from submitting a form and prevent a link from following the URL.

So, my question is:

1. In what other situations can we use preventDefault()?

2. How could I find out all the browsers default behaviour? e.g. if I click a button, what is the browsers default behaviour?

Answer 1

1.在什么情况下我们可以使用preventDefault()？

实际上，任何类型的事件，您都可以使用 停止其默认行为，preventDefault(); 因此不仅可以提交按钮，还可以使用按键、滚动事件，您可以命名它，并且可以阻止它发生。或者，如果您想将自己的逻辑添加到默认行为，请考虑记录事件或您选择的任何内容。

2.如何找出所有浏览器的默认行为？例如，如果我单击一个按钮，浏览器的默认行为是什么？

你这是什么意思？大多数情况下，默认行为是隐含的。当您单击按钮时，会触发 onclick 事件。当您单击提交按钮时，将提交表单。当窗口滚动时，会触发 onscroll 事件。

Answer 2

1）在什么情况下我们可以使用preventDefault()？

各种表单字段会根据某些事件更新其状态，例如单击复选框时的复选框。如果您preventDefault打开click，复选框将恢复到之前的选中状态。有很多行为——当按键被按下时，当窗口被滚动时，当一个元素被聚焦时......

2) 我怎样才能找出所有浏览器的默认行为？例如，如果我单击一个按钮，浏览器的默认行为是什么？

规范列出了每个元素的“激活行为”。a例如，将元素描述的激活行为与 描述的激活行为进行比较input[type=checkbox]。（“点击前激活步骤”也很有趣。）

Answer 3

DOM 中的每个项目都有一些“默认行为”。这对于每个浏览器来说都差不多（一些例外情况除外）。如果您希望执行您自己的逻辑而不是默认行为，您可以使用 preventDefault() 函数。stopPropagation() 函数也是如此，如果您只希望执行自己的逻辑而不希望从那里执行其他任何操作，该函数会阻止事件冒泡事件树。

Answer 4

您可以在每种类型的事件中使用它，例如：

element.onclick = function(event) {
    event = event || window.event

    if (event.preventDefault) { // W3C variant
        event.preventDefault()
    } else { // IE < 9 variant. It doesn't work in older version of IE
        event.returnValue = false
    }
}

和有什么区别returning false？event.preventDefault

1. 返回假。停止默认浏览器操作并完成处理。
2. event.preventDefault。停止默认浏览器操作但未完成处理

这是一个有用的链接，可以深入解释它。