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

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用户选择和-Webkit用户选择属性支持此功能。但是，Internet Explorer支持元素上的"不可选择"属性。当设置为值"on"时，无法选择元素内的文本。

因此，基本上，不用在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提供此类'unselect'

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

这样，这将适用于Firefox/Chrome/IE10+浏览器。div中的文本将不可选择，onBlur事件也将被触发。这里有一个工作JSFiddle供您参考。