onmousedown事件停止输入焦点

onmousedown event stopping input focus

本文关键字：输入 焦点 事件 onmousedown      更新时间：2023-09-26

我正在处理mousedown&oncontextmenu事件来阻止文本&图像选择，右键单击并拖动。代码如下-

<body oncontextmenu="return false;" onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false"> 
    <input type="text" name="testInput" id="testInput">
</body>

我想问题是它也阻止了对输入元素的关注，就像我阻止默认&onmousedown事件返回false，所以它不允许控件切换到输入焦点，所以我不能在其中键入任何内容。我试图通过以下代码对其进行调试。

<script type="text/javascript">
    $(function(){
        $( "#testInput" ).on("focus",function(){
           console.log("input focused");
        });
    });
</script>

当我从body中删除onmousedown属性时，它在cosole上给了我想要的消息。

有什么帮助吗。。。提前谢谢。

您可以检查mousedown/contextmenu事件是否发生在任何内部元素上，如果是，则允许默认操作，如果不是，则使用下面的阻止默认操作

document.getElementsByTagName("div")[0].addEventListener("mousedown",function(e){
    if(e.target.id=="testInput"){
    } else{
      e.preventDefault();
    }
});
document.getElementsByTagName("div")[0].addEventListener("contextmenu",function(e){
    if(e.target.id=="testInput"){
    } else{
      e.preventDefault();
    }
});

检查Fiddle

相关文章：