синий цвет выделения Mozilla в интерактивных элементах javascript

У меня проблема с Mozilla и классическим синим цветом подсветки. Но с выделенным текстом проблем нет, я имею в виду, что я искал и пробовал свойство css ::-moz-selection, и оно отлично работает, но реальная сделка связана с некоторыми интерактивными событиями 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>

Итак... Когда я нажимаю, рисунок/изображение становится синим (оно исчезает, если я нажимаю в другом месте)...

Я пробовал все селекторы css, которые я знаю (::selection, ::-moz-selection, посещенный, активный и т. д.), и в Chrome у меня нет никаких проблем.

Помогите, пожалуйста!!


javascript mozilla highlight
person user2744115    schedule 03.09.2013    source источник
comment
Можете ли вы создать jsfiddle?   -  person Jonathan Crowe    schedule 03.09.2013
comment
Ну ... я даже не знал, что это такое ... я играл с этим, но не знаю, как это работает   -  person user2744115    schedule 03.09.2013
comment
@user2744115 вставьте свой код HTML/CSS/JS jsfiddle.net и нажмите кнопку "Сохранить". С помощью JSFiddle вы можете поделиться с нами своей проблемой, чтобы мы могли ее воспроизвести.   -  person Inferpse    schedule 03.09.2013
comment
в порядке! но я работаю на локальном хосте, поэтому изображения не будут отображаться, верно? (и извините за мой английский, я из Испании и мне трудно). есть проблема с этим??   -  person user2744115    schedule 03.09.2013
comment
это ссылка jsfiddle.net/mYg7F   -  person user2744115    schedule 03.09.2013

Ответы (1)


arrow_upward
0
arrow_downward

Это решение должно работать во всех браузерах, отличных от ie (и IE 10), согласно этому сообщению SO:

Запретить выделение текста после двойного щелчка

В вашем 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>
person Jonathan Crowe    schedule 03.09.2013
comment
Привет! Спасибо! Только с CSS не работает (я не знаю, должен ли он работать двойным щелчком, потому что мое событие проходит только с одним щелчком мыши), но с функцией, которую я нашел в ссылке, которую вы разместили, работает хорошо! - person user2744115; 04.09.2013
comment
этот: function clearSelection() { if(document.selection && document.selection.empty) { document.selection.empty(); } else if(window.getSelection) { var sel = window.getSelection(); сел.удалитьвсе диапазоны(); } } - person user2744115; 04.09.2013
comment
Кстати, большое спасибо за помощь. Я хочу отметить ваш ответ как полезный, но, похоже, у меня достаточно репутации... - person user2744115; 04.09.2013