Форум

kilo · #1 (**permalink**) 23.07.2013, 09:51

Здравствуйте.
предположим есть кнопка у которой 3 состояния: A,B,C.
начальное состояние кнопки A,перейти из него можно только в состояние B только по click.
после такого перехода состояние может переходить из B в C и обратно при наведении мыши(hover) или при клике.
при этом происходит конфликт hover(или событием mouseover) с событием click.пожалуйста подскажите как решить эту проблему в jquery,если средствами css не обойтись.

ksa · #2 (**permalink**) 23.07.2013, 09:58

Сообщение от kilo

подскажите как решить эту проблему

Как вариант, просто удалить событие click после его срабатывания...

Т.е. перешел из А в В и событие удалил... Далее только В и С...

ОлегА · #3 (**permalink**) 23.07.2013, 09:59

код покажите

kilo · #4 (**permalink**) 23.07.2013, 10:33

ну примерно как-то так:
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");
} );
});

ОлегА · #5 (**permalink**) 23.07.2013, 11:57

хз конфликтов нет, все робит, какая именно у вас ошибка выпадает?

skrudjmakdak · #6 (**permalink**) 23.07.2013, 12:26

что то подобное:

<!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>

ksa · #7 (**permalink**) 23.07.2013, 13:41

Сообщение от skrudjmakdak

что то подобное

Оно?

<!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>

skrudjmakdak · #8 (**permalink**) 23.07.2013, 14:18

у вас не правильно. а где ths.className='off'; ?? не идет возврат цвета в первоначальное состояние

ksa · #9 (**permalink**) 23.07.2013, 14:34

Сообщение от skrudjmakdak

у вас не правильно

А я и не знал "что именно нужно"...

Сообщение от skrudjmakdak

а где ths.className='off'; ??

Ну именно "off" и не нужен... Достаточно просто убрать "on"

Сообщение от skrudjmakdak

не идет возврат цвета в первоначальное состояние

Таки сделай это самостоятельно и в нужном тебе контексте. Кто мешает?

skrudjmakdak · #10 (**permalink**) 23.07.2013, 16:18

Сообщение от ksa

А я и не знал "что именно нужно"...

ну дак в любом случае вы взяли мою (я не против) версию и сделали криво. если уж переделывайте, то переделывайте в лучшую сторону..

Сообщение от ksa

Ну именно "off" и не нужен... Достаточно просто убрать "on"

я знаю, что не обязательно. но и если и будет стоять, то ошибки не будет.. но не в этом суть то...

Сообщение от ksa

Таки сделай это самостоятельно и в нужном тебе контексте. Кто мешает?

не понял?

Форум

Справочник

Discord чат

Курсы javascript