onmouseout, конфликтующий с onclick

Хорошо, я использую JavaScript для управления обменом изображениями, так что когда кто-то нажимает на изображение, он меняется на «освещенную» версию изображения. Код для этого в теге ссылки: onclick="changeto('wdl')", и я добавил onmouseover="changeto('wdl')", поэтому, когда вы наводите на него курсор, он загорается.onmouseout, конфликтующий с onclick

Теперь, когда проблема возникает, естественно, когда я добавил onmouseout="changeto('wdd')", который является неосновной версией изображения. Конечно, здесь происходит то, что, когда я наводил на него курсор, он загорается, когда я перемещаю курсор, он переходит в не освещенную версию. Но когда вы нажимаете на него, оно меняет изображение на освещенную версию, как должно, но из-за команды onmouseout оно изменяется на неактивную версию.

Я хочу, чтобы можно было навести курсор на изображение и зажечь его. Если вы нажмете на него и отпустите мышь, он будет гореть, но если вы не нажмете его и не переместите мышь, он останется на «выключенном» изображении.

Любая помощь приветствуется, я здесь. Я собирался попытаться использовать что-то вроде типа if (!this), но, честно говоря, просто не знаю.

источник

2012-04-05 Corbin Holbert

Некоторые примеры кода могут значительно помочь в предоставлении ответа, который вы ищете. –

Я вижу два решения: 1. Объявить отдельный класс CSS для onclick события, которое определено ниже wdd (или использует !important 2. Использование переменной флаг, который установлен в true в onclick и затем испытаны в onmouseout:.

~~onclick="changeto('wdl');flag=true;" onmouseout="if (!flag) changeto('wdd')"~~

Вот простой пример с CSS и Javascript:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Example</title> 
     <style> 
      #whl { 
       background: #e0e0ff; 
       line-height: 150px; 
       text-align: center; 
       width: 150px; 
      } 
      #wdl { 
       background: #e0ffe0; 
       line-height: 150px; 
       text-align: center; 
       width: 150px; 
      } 
      #whl:hover { 
       background: #ffcccc; 
      } 
      #wdl:hover { 
       background: #ffcccc; 
      } 
      #whl.selected { 
       background: #ffcccc; 
      } 
      #wdl.selected { 
       background: #ffcccc; 
      } 
     </style> 
     <script> 
      function doClick(el) { 
       document.getElementById("whl").className = document.getElementById("whl").className.replace(/(?:^|\s)selected(?!\S)/ , ''); 
       document.getElementById("wdl").className = document.getElementById("wdl").className.replace(/(?:^|\s)selected(?!\S)/ , ''); 
       el.className += "selected"; 
      } 
     </script> 
    </head> 
    <body> 
     <div id="whl" onclick="doClick(this);">WHL</div> 
     <div id="wdl" onclick="doClick(this);">WDL</div> 
    </body> 
</html>

Он работает с цветами и в вашем случае вам придется заменить цвета с фоновыми изображениями (в CSS).

источник

2012-04-05 02:02:01

Да. Объявите глобальную переменную 'flag' и сначала установите значение false. Это плохая практика, но без кода я не могу предложить ничего лучшего. –

Я просмотрел ваш код, и я не мог найти очевидного решения. Я бы пошел с решением @josnidhin - используя разные классы CSS и Javascript для кликов, но для этого потребуется переписать значительную часть вашей страницы. –

Всегда приветствую :-) –

Вы должны использовать комбинацию CSS и javascript. Посмотрите CSS парить, чтобы достигнуть функции наведения мыши и сделать щелчок часть из Js

CSS Hover на W3Schools http://www.w3schools.com/cssref/sel_hover.asp

источник

2012-04-05 02:01:48 Josnidhin

onmouseout, конфликтующий с onclick

ответ

Смежные вопросы