onmousedown 事件停止输入焦点答案

【问题标题】：onmousedown event stopping input focusonmousedown 事件停止输入焦点
【发布时间】：2014-09-16 07:41:13
【问题描述】：

我正在处理 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 上给了我想要的消息。

任何帮助...提前致谢。

【问题讨论】：

标签： javascript input focus onmousedown

【解决方案1】：

您可以检查 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();
    }

});

Check the Fiddle

【讨论】：

但是每当我在内部元素上尝试它时，它的 body mousedown/contextmenu 事件都会被调用，并且它会从 body 本身返回，而不是让控制来处理内部元素的 mousedown/contextmenu。
你可以使用 document.getElementsByTagName("body")[0] 代替 div