[英]What are some example of `browser default behavior` that will be prevented by `event.preventDefault()`?
I quite understand that event.preventDefault()
will prevent any default behavior triggered by an event on browser, but this definition is too broad for me , for example what are those event default behavior on browser?我非常理解
event.preventDefault()
将阻止浏览器上的事件触发的任何默认行为,但这个定义对我来说太宽泛了,例如浏览器上的那些事件默认行为是什么? since it's quite common to find developers use event.preventDefault()
but I still don't understand what kind of behavior they're trying to prevent.因为发现开发人员使用
event.preventDefault()
是很常见的,但我仍然不明白他们试图阻止什么样的行为。
If you click on a link, such as to http://example.com
, your browser's default behavior will be to take you to http://example.com
.如果您点击一个链接,例如
http://example.com
,您的浏览器的默认行为将带您到http://example.com
。
If you preventDefault
in a click handler, the browser will no longer change your window location.如果您在点击处理程序中
preventDefault
,浏览器将不再更改您的窗口位置。
document.querySelector('.prevent-default').addEventListener('click', function (e) { e.preventDefault(); }, false);
<a href="http://example.com">Normal Example</a> <a class="prevent-default" href="http://example.com">Prevented Example</a>
Other examples include:其他例子包括:
submit
has associated form submission submit
有关联的表单提交mousedown
has associated text selection mousedown
有关联的文本选择keydown
has associated input keydown
有关联的输入touchstart
may have associated scrolling/zooming behaviors. touchstart
可能具有关联的滚动/缩放行为。one quick example is click
event.一个简单的例子是
click
事件。 Let's say you have a tag like假设你有一个标签
<a href="/my-sub-page.html" class='ajax-link'>
default behavior will be when you click this link it will take you to the /my-sub-page.html page.默认行为是当您单击此链接时,它会将您带到 /my-sub-page.html 页面。 but if you want to avoid page refresh and instead you want to use ajax.
但是如果你想避免页面刷新,而是想使用ajax。 then you will use
然后你会使用
$('.ajax-link').on('click', function(event){
event.preventDefault();
$.ajax({
url : $(this).attr('href'),
success : function(response){
$('.my-content').html(response);
}
})
});
or another example can be form submits.或者另一个例子可以是表单提交。 Similar to above, you canprevent default behavior of form submission, and use ajax and get result from post request without loading the page.
与上面类似,您可以防止表单提交的默认行为,并使用 ajax 并在不加载页面的情况下从 post 请求中获取结果。
There are many default browser actions:有许多默认浏览器操作:
mousedown
– starts the selection (move the mouse to select). mousedown
– 开始选择(移动鼠标选择)。click
on <a href="">
- open the page. click
<a href="">
- 打开页面。click
on <input type="checkbox">
– checks/unchecks the input. click
<input type="checkbox">
– 检查/取消检查输入。submit
– clicking an <input type="submit">
or hitting Enter inside a form field causes this event to happen, and the browser submits the form after it. submit
- 单击<input type="submit">
或在表单字段内按 Enter 会导致此事件发生,浏览器会在此事件之后提交表单。keydown
– pressing a key may lead to adding a character into a field, or other actions. keydown
– 按下一个键可能会导致在字段中添加一个字符或其他操作。contextmenu
– the event happens on a right-click, the action is to show the browser context menu. contextmenu
-事件发生在右键单击,动作是显示在浏览器上下文菜单。 etc.The event.preventDefault() method stops the default action of an element from happening. event.preventDefault()方法阻止元素的默认操作发生。
For example:例如:
Use the event.isDefaultPrevented() method to check whether the preventDefault() method was called for the event.使用event.isDefaultPrevented()方法检查是否为事件调用了preventDefault()方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.