I have a form with the panel, which will have some checkboxes for options. I made panel slide in to the form when mouse hovers the edge of it (edge of panel). I made it hide (slide back) when mouse leaves the panel. The problem is that when I point a checkbox in this panel a mouseleave event occures and panel slides back so I cannot check checkbox. Is there any way to prevent mouseleave event when mouse is still over the panel and some checkboxes in it? My idea for know is to make a condition based on mouse pointer position in mouseleave event, but I hope that there is a way to make app treat a checkbox as a part of panel. Did not put any food since it is not problem of it. But can post if needed.
Asked
Active
Viewed 976 times
0
-
you could attach the CheckBox MouseOvers to the same handler – sa_ddam213 Nov 27 '13 at 20:49
-
1See [How can a hover effect be created for a grouping of controls?](http://stackoverflow.com/a/6672318/719186) – LarsTech Nov 27 '13 at 21:47
-
@sa_ddam213 how do I do that? – Łukasz Motyczka Nov 28 '13 at 08:14
1 Answers
1
What happens here is that the mouseleave event of the checkbox triggers mouseleave event of the panel due to the event bubbling. You can read more about event bubbling here.
To prevent the event bubbling, attach mouseleave event on the checkboxes and call event.stopPropagation().
Sample code with jQuery:
$("checkboxes_selector").on("mouseleave", function(event){
event.stopPropagation();
});
Community
- 1
- 1
Ilija Dimov
- 5,221
- 7
- 35
- 42
-
Unfortunately, I am begginer and did not work with jQuery yet. But I'll look into that. – Łukasz Motyczka Nov 28 '13 at 11:25