javascript - 禁止单击以突出显示 DIV 的最佳方法是什么？

Question

我有两个“按钮”，它们由一个带有 UTF-8 箭头字符的 DIV 组成。

当用户点击它们时，它们有时会突出显示。

抑制这种突出显示以使其适用于所有浏览器但不影响点击的最佳方法是什么？

这是标记：

<div class="arrowContainer"><div class="arrowLeft">...</div></div>

.arrowContainer .arrowLeft {
    background-color:#E0E0E0;
    width:15px;
    padding: 1px 0 0 0;
    height: 19px;
    text-align: center;
    float:left;
    margin: 0 2px 0 0;   
    font-size: 9pt;
    cursor: pointer;
}

Answer 1

似乎它已被选中（就像您选择文本时一样），因此请尝试禁用选择选项：

*.notSelectable{
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     IE 10.        
   */
   -ms-user-select: none;
   user-select: none;
}

Answer 2

你可以把它们全部扔掉：

$.fn.unselectable = function() {
    return this.each( function() {
        $(this).css({
            mozUserSelect: "none",
            webkitUserSelect: "none",
            msUserSelect: "none",
            userSelect: "none"
        })
            .attr( "unselectable", "on" )
            .on( "selectstart", function(e){
                e.preventDefault();
            });
    });
};

$(".arrowContainer").unselectable();