Default Behaviors and Prevention

Browsers and HTML elements provide some default behaviors, also known as default events.

Default Behaviors

Clicking on<a> tag to navigate

When the <a> tag has an href attribute, it will automatically navigate to the linked page or scroll to the anchor. By preventing the default behavior of the <a> tag, clicking on the link will not navigate.

<a href="https://blog.touchczy.top" id="t1">Click to navigate</a>
<script type="text/javascript">
    document.getElementById("t1").addEventListener("click", (e) => {
        e.preventDefault();
    })
</script>

Right-clicking to display a menu

Right-clicking on a browser page will display a menu. By preventing the default behavior of the document, the menu will not appear when right-clicking on the page. Alternatively, a custom context menu can be created by listening to and preventing the default behavior.

<script type="text/javascript">
    document.addEventListener("contextmenu", (e) => {
        e.preventDefault();
    })
</script>

Input typing

When an <input> or <textarea> element is focused, typing on the keyboard will automatically input characters. By preventing the default behavior, typing on the keyboard will not input characters. This event can be used to filter input data, for example, allowing only numeric input.

<input id="t3" />
<script type="text/javascript">
    document.getElementById("t3").addEventListener("keydown", (e) => {
        e.preventDefault();
    })
</script>

Checkbox selection

By default, clicking on a checkbox will select or deselect it. By preventing the default behavior, clicking will not change the current state.

<input id="t4" type="checkbox" />
<script type="text/javascript">
    document.getElementById("t4").addEventListener("click", (e) => {
        e.preventDefault();
    })
</script>

Form submission

If there is an <input> or <button> with type set to submit in a form, it will trigger the form submission. By preventing the default behavior, the form will not be automatically submitted.

<form action="./" id="t5">
    <input type="submit" name="btn" />
</form>
<script type="text/javascript">
    document.getElementById("t5").addEventListener("submit", (e) => {
        e.preventDefault();
    })
</script>

Preventing Default Behaviors

  • The recommended way to prevent default behaviors by the W3C is to use event.preventDefault(). This method only prevents the default behavior without stopping the event propagation.
  • For browsers like IE8 and earlier, preventing default behaviors requires using window.event.returnValue = false.
  • In the event handler function, directly returning false can also prevent the default behavior, but this only works in the DOM Level 0 event model. Additionally, in jQuery, using return false will both prevent the default behavior and stop event propagation.

Example Code

<!DOCTYPE html>
<html>
<head>
    <title>Default Behaviors and Prevention</title>
</head>
<body>
    <a href="https://blog.touchczy.top" id="t1">Click to jump to the link</a>
    <input id="t3" />
    <input id="t4" type="checkbox" />

    <form action="/" id="t5">
        <input type="submit" name="btn" />
    </form>

    <a href="https://blog.touchczy.top" id="t6">Click to jump to the link</a>

</body>
<script type="text/javascript">
    document.getElementById("t1").addEventListener("click", (e) => {
        e.preventDefault();
    })

    document.addEventListener("contextmenu", (e) => {
        e.preventDefault();
    })

    document.getElementById("t3").addEventListener("keydown", (e) => {
        e.preventDefault();
    })

    document.getElementById("t4").addEventListener("click", (e) => {
        e.preventDefault();
    })

    document.getElementById("t5").addEventListener("click", (e) => {
        e.preventDefault();
    })

    document.getElementById("t6").onclick = (e) => {
        return false;
    }
</script>
</html>

Daily Question

https://github.com/WindrunnerMax/EveryDay

Reference

https://segmentfault.com/a/1190000007681900 http://www.imooc.com/article/259535?block_id=tuijian_wz https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault