javascript return false vs preventdefault 焦点改变

标签 javascript html event-handling focus

https://jsfiddle.net/5f19mz0y/21/

我正在寻找防止按下 Tab 键时焦点从输入框逃逸的方法。然后,我找到了几种使用 preventDefault() 来处理 onkeydown 事件的方法。所以,由于返回 false 与使用 preventDefault()stopPropagtion() 有相同的效果,我认为 return false 可以用来代替做同样的事情,但经过测试发现它不能以这种方式工作。

<script>
function tab( event ) {

    if ( event.keyCode === 9)
    {
event.preventDefault(); //- focus doesn't change

        }
}
</script>
<input onkeydown="tab(event);">

以上代码按预期工作;当按下 tab 键时,焦点不会改变。

<script>
function tab( event ) {

    if ( event.keyCode === 9)
    {
return false; //- focus changes

        }
}
</script>
<input onkeydown="tab(event);">

对于上面的代码,当按下tab键时焦点发生变化

谁能解释一下这是为什么?


已添加

<script>
 function tab( event ) {

    if ( event.keyCode === 9)
    {
event.preventDefault();
event.stopPropagation();//- focus not changes

        }
}
</script>
<input onkeydown="tab(event);">

考虑到 return false 中的 stopPropagation() 影响了结果,就像上面一样,我也用 preventDefault() 进行了测试> 和 stopPropagation()。但是,这也可以正常工作,就像单独使用 preventDefault() 一样;结果与 return false 的结果不同。所以,除了 preventDefault()stopPropagation()

之外,return false 似乎还有更多内容

最佳答案

从 Javascript 事件处理程序返回 false 等同于同时调用 e.preventDefaulte.stopPropagation

所以不同之处在于 preventDefault 只会阻止默认事件操作的发生,即链接点击时的页面重定向、表单提交等,并且 返回 false也会停止事件流

More Detail See Here

关于javascript return false vs preventdefault 焦点改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51063997/

相关文章:

javascript - 如何使用 Jquery 控制下拉选择选项菜单

javascript - Angular 2 通过 [class.className] 绑定(bind)添加多个类

javascript - select option remove() 方法删除多个选项

html - 使用标签作为复选框 - 无法选择某些 "Checkboxes"

c# - 有没有办法在不使用设计器的情况下为 C# 中的控件添加事件处理程序?

javascript - ESLint 与 Babel plugin-proposal-export-default-from

html - 如何使用 ajax 和 jquery 更新特定的 div

html - text-align 属性在此代码中无法正常工作

javascript - 如何防止在快速点击时调用 en 事件处理程序两次?

c++ - 使用 boost::asio 和 strands 的事件队列:WAITING新事件