禁止点击突出显示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();