javascript - 可点击 javascript 元素中的 mozilla 蓝色突出显示颜色

Question

我对 Mozilla 和经典的蓝色突出显示颜色有疑问。但是突出显示的文本没有问题，我的意思是，我一直在搜索并尝试了::-moz-selection css 属性，它工作正常，但真正的问题是我的页面上有一些可点击的 javascript 事件，例如...

CSS

figure:nth-of-type(1) { 
    -o-transform: translate(60%,-25%) rotate(-10deg) scale(0.60);
    -webkit-transform: translate(60%,-25%) rotate(-10deg) scale(0.60);
    -moz-transform: translate(60%,-25%) rotate(-10deg) scale(0.60);
    transform: translate(60%,-25%) rotate(-10deg) scale(0.60); }

figure.active:nth-of-type(1) {
    z-index:10; 
    box-shadow:0px 0px 50px black;
    -o-transform: translate(-6.5%,-13.5%) rotate(0deg) scale(0.70); 
    -webkit-transform: translate(-6.5%,-13.5%) rotate(0deg) scale(0.70); 
    -moz-transform: translate(-6.5%,-13.5%) rotate(0deg) scale(0.70); 
    transform: translate(-6.5%,-13.5%) rotate(0deg) scale(0.70); }

JavaScript

<script type="text/javascript" >
    <!--
    function listen() {
        var images=document.getElementsByTagName("figure");
        var i=images.length;
        while(i--){images[i].addEventListener('click', focusImage);}
    }
    function heard() {
        var images=document.getElementsByClassName("active");
        var i=images.length;
        while(i--){images[i].addEventListener('click', unfocusImage);}
    }   
    function focusImage(x){
        var target=x.target;
        var images=document.getElementsByTagName("figure");
        var i=images.length;
        while(i--){images[i].className=""; images[i].addEventListener('click', focusImage)}
        if (target.tagName=="FIGURE"){target.className='active';}
        target.removeEventListener('click', focusImage)
        heard();
    }   
    function unfocusImage(x){
        var target=x.target;
        if (target.className=="active"){target.className='';}                   
        target.addEventListener('click', focusImage);
    }
    //-->

    window.addEventListener('load', listen);                
</script>   

HTML

<figure> 
    <img src="<?php bloginfo('template_directory'); ?>/assets/art_home/01.jpg"  alt="" />
</figure>

所以...当我单击时，图形/img 会变成蓝色突出显示(如果我单击另一个地方，它就会消失)...

我尝试了我知道的所有 css 选择器(::selection、::-moz-selection、visited、active 等)，在 Chrome 中我没有任何问题。

请帮忙!!

Answer 1

根据此 SO 帖子，此解决方案应该适用于所有非 ie 浏览器(和 IE 10):

Prevent text selection after double click

在你的 CSS 中:

.no_selection {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

在 HTML 中:

<figure class="no_selection"> 
    <img src="<?php bloginfo('template_directory'); ?>/assets/art_home/01.jpg"  alt="" />
</figure>