jquery конфликт hover и click
Здравствуйте.
предположим есть кнопка у которой 3 состояния: A,B,C. начальное состояние кнопки A,перейти из него можно только в состояние B только по click. после такого перехода состояние может переходить из B в C и обратно при наведении мыши(hover) или при клике. при этом происходит конфликт hover(или событием mouseover) с событием click.пожалуйста подскажите как решить эту проблему в jquery,если средствами css не обойтись.:help: |
Цитата:
Т.е. перешел из А в В и событие удалил... Далее только В и С... |
код покажите
|
ну примерно как-то так:
function func_click(h) { if( $(h).hasClass("active") ) { $(h).addClass("inactive").html("...").removeClass( "active"); } else { if ($(h).hasClass("inactive") ) { $(h).removeClass("inactive"); } $(h).addClass("active").html("...diff"); } // } function func_hover(a) { if( $(a).hasClass("active") ) { $(a).addClass("inactive").html("...").removeClass( "active"); } else if ($(a).hasClass("inactive") ) { $(a).removeClass("inactive"); $(a).addClass("active").html("...diff"); } // } $(document).ready(function(){ $('.btn').live("mouseover", function(){ func_hover(".btn"); } ); $('.btn').click( function(e){ e.preventDefault(); $('.btn').die("mouseover"); func_click(".btn"); } ); }); |
хз конфликтов нет, все робит, какая именно у вас ошибка выпадает?
|
что то подобное:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width: 200px; height: 30px; background-color: green;" onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);">Жмакай меня полностью!</div>
<script type="text/javascript">
var clickme = false;
function mouseover(ths)
{
ths.style.background = clickme ? 'silver' : 'blue';
}
function mouseout(ths)
{
ths.style.background = 'green';
}
function mousedown(ths)
{
clickme = true;
ths.style.background = 'silver';
}
function mouseup(ths)
{
clickme = false;
ths.style.background = 'blue';
}
document.onmouseup = function()
{
clickme = false;
}
</script>
</body>
</html>
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
div {
width: 200px;
height: 30px;
background-color: green;
}
</style>
<script type="text/javascript">
function mouseover(ths) {
ths.style.background = (ths.className=='on') ? 'silver' : 'blue';
};
function mouseout(ths) {
ths.style.background = 'green';
};
function mousedown(ths) {
ths.style.background = 'silver';
};
function mouseup(ths) {
ths.style.background = 'blue';
ths.className='on';
};
</script>
</head>
<body>
<div onmouseover="mouseover(this);" onmouseout="mouseout(this);" onmousedown="mousedown(this);" onmouseup="mouseup(this);">Жмакай меня полностью!</div>
</body>
</html>
|
у вас не правильно. а где ths.className='off'; ?? не идет возврат цвета в первоначальное состояние
|
Цитата:
Цитата:
Цитата:
|
Цитата:
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 21:31. |