Question

为什么 JavaScript 中 return false 就能终止事件

Answer 1

首先你遇到的场景应该是类似于表单提交的事件吧，如果不是，那我也用表单提交事件来做例子说一下，首先看代码

<form id="formID">
    <input type="text" id="inputID" >
    <input type="submit" value="提交" >
    <input type="button" value="模拟提交" id="submitID">
</form>
<script>
    var form = document.getElementById('formID');
    var input = document.getElementById('inputID');
    var submit = document.getElementById('submitID');

    function submitOrNot (value) {

        if (value === 'yes') {
            return true;
        }
        else {
            return false;
        }
    }

    form.onsubmit = function () {

        // 当点击submit按钮，form表单的submit事件被触发
        // onsubmit return false 则submit事件会被取消
        // 这就是你所提到的场景
        return submitOrNot(input.value);
    };

    ///////////////////////////////////////////////////////////
    // 下面我们大概来模拟浏览器实现点击按钮触发submit事件的过程
    submit.onclick = function () {

        if (typeof form.onsubmit === 'function') {

            if (form.onsubmit() === false) {
                // 当form.onsubmit return false, form 不做提交
                return;
            }
        }

        form.submit();
    }
</script>

所以其实就是在此类事件触发时，浏览器行为约定了如果事件处理函数return false则终止事件。如果我们自己来实现事件机制，我们也可以改变约定，比如return true的时候终止事件，或者其他约定。