Question

在IE11中，当鼠标按下具有不可选择的''on'属性的DIV元素时未触发模糊事件。在其他浏览器中，鼠标按下此DIV元素时会触发模糊事件

如果没有不可选择的属性模糊事件，则在此DIV上鼠标按下时会触发。我需要使用模糊事件的不可选属性，同时鼠标按下这个DIV，如何实现这一点？

请在下面找到代码段

 function blurEvent() {
            alert("event fired");
        }

<input type="text" id="hello" onblur="blurEvent()"/>
    <div style="width:300px;height:300px;background:#0ff" unselectable="on">
        dasdasdsa
    </div>

Answer 1

Firefox和Webkit分别通过专有的-moz-user-select和-webkit-user-select属性支持此功能。然而，Internet Explorer支持“不可选择的”＆＃39;元素的属性。当设置为＆＃34; on＆＃34;时，无法选择元素内的文本。

所以基本上不是将div中的属性设置为不可选，而是可以使用CSS轻松完成。创建一个类（比如取消选择）并将用户选择选项设置为none，然后将div设为相同的类。

<强> CSS：

.unselect
{
  -moz-user-select: none; /* For firefox */
  -webkit-user-select: none; /* for chrome */
  -ms-user-select: none; /* for IE10+ */
}

然后为div提供此类＆＃39;取消选择＆＃39;

<input type="text" id="hello"/>
<div style="width:300px;height:300px;background:#0ff" class='unselect'>
    dasdasdsa
</div>

通过这种方式，这将适用于Firefox / Chrome / IE10 +浏览器。 div中的文本将无法选择，您的onBlur事件也将被解雇。这是Working JSFiddle供您参考。

在IE11中，当鼠标按下具有unselectable ='on'属性的div元素时，不会触发模糊事件

1 个答案: