In the highly-artistic drawing above, the green square is a child of the pink one. The pink one is wrapped around the green one by my function, so the green square could be anything - a hyperlink, an image, button, etc.
I want to capture a click on the pink div ONLY if it isn't a click on the green element too.
This could be done by flipping a Boolean using mouseenter on the green square, but that seems a messy way to do it to me.
Any clues?
IMPORTANT EDIT: I can't mess with the green square at all, so no adding anything to the click event.
You can do this:
$('.pink-box-selector').click(function(e) {
if ($(e.target).is('.pink-box-selector')) {
// do stuff here
}
});
Two options. You can first either check if the target is the green div.
$('#pinkdiv').click(function(e) {
if ($(e.target).is('#greendiv')) return;
// handle the event
});
Or you can write the click handler for the pink div normally and stop clicks on the green div from propagating.
$('#greendiv').click(function(e) {
e.stopPropagation();
});
Would $("#div_id :not('#excluded_element')).click(); help?
http://api.jquery.com/not-selector/
Setup a separate click event listener for the "green" element and have it event.preventDefault()
http://jsfiddle.net/rlemon/d8qVp/
$("#pink").click(function(){
if(!$("#green").is(":hover")) {
alert('here');
}
});
Related
I have created a series of elements that when you click on any one of them, they will expand, pushing the other elements out of the way. Initially if you clicked on it again the element would contract, but now I want to take the close functionality and put it in a button with in the element.
Initially when you click on the element, I use jQuery to add a number of classes to a variety of elements.
$(".left > .elem").click(function () {
$(this).addClass("expand");
$(this).parent().addClass("WithLarge");
$(this).children(".bar").addClass("visible");
$(this).children(".reduce_button").addClass("visible");
$(".right").addClass("shift_right");
});
When I click the close button I would like to remove those classes.
$(".reduce_button").click(function () {
$(this).parent().removeClass('expand');
$(this).parent().removeClass("WithLarge");
$(this).parent().children(".bar").removeClass("visible");
$(this).parent().children(".reduce_button").removeClass("visible");
}
The problem is, those classes aren't budging.
You can try it out on the JSFiddle
Click on the yellow box(".left > .elem"), it expands pushing the others out of the way, click on the red box(".reduce_button"), and nothing happens. I tried
console.log($(this).parent().hasClass('expand'));
$(this).parent().removeClass('expand');
console.log($(this).parent().hasClass('expand'));
to see if it has been removed. It returns false, even though the class is still there.
Why can't I remove these classes?
You ARE removing the class. But, the click on the .reduce_button is also triggering the .elem click event, which adds the class back again.
EDIT:
As commented below by j08691, you can add stopPropagation to keep the event of going on to the next listener, like:
$(".reduce_button").click(function (e) {
$(this).parent().removeClass('expand');
e.stopPropagation();
...
Here is your fiddle updated: http://jsfiddle.net/HybHK/9/
I am trying to have an image attribute source replaced on mouse enter mouse leave event. And when clicked, the image should stay as active. I need the mouseleave event to stop after clicking has been made. So far the mouseeleave still continues after clicking, switching back the image , here is the code below:
<script>
jQuery('.paypal').mouseenter(function(){
jQuery('.paypal').attr('src','http://url-to-my-active-image.jpg');?>');
}),
jQuery('.paypal').mouseleave(function(){
jQuery('.paypal').attr('src','http://url-to-my-inactive-image.jpg');
}),
jQuery('.paypal').click(function(){
jQuery('.paypal').css('opacity','1');
});
</script>
How can I achieve that?.
Just turn off the mouseleave when you click with:
jQuery('.paypal').click(function(){
jQuery('.paypal').css('opacity','1').off('mouseleave');
});
A quick solution seems to be to add a class on click, and then check for the presence of that class on mouseleave; if it's there, do nothing.
<script>
jQuery('.paypal').mouseenter(function(){
jQuery('.paypal').attr('src','http://url-to-my-active-image.jpg');?>');
}),
jQuery('.paypal').mouseleave(function(){
if(!jQuery('.paypal').hasClass('selected')){
jQuery('.paypal').attr('src','http://url-to-my-inactive-image.jpg');
}
}),
jQuery('.paypal').click(function(){
jQuery('.paypal').css('opacity','1').addClass('selected');
});
</script>
#j08691's answer is probably easier to maintain, especially if you're using a recent version of jQuery (1.7 or higher).
You can turn off the mouseleave handler inside the click handler by using off:
jQuery('.paypal').click(function() {
jQuery('.paypal').css('opacity', '1');
jQuery('.paypal').off('mouseleave');
});
I have the following and it works as it lets me control the the background color of a button. However, I do not have any control over when the button is hovered on.
popUpDialog.parent().find('button:contains("Save")').addClass('gb').removeClass('ui-state-default');
popUpDialog.parent().find('button:contains("Save")').addClass('gb').removeClass('ui-state-hover');
Is there a way to modify the hover class or effect what happens to the button when it gets a hover?
Try the following.
$(function(){
var button = popUpDialog.parent().find('button:contains("Save")');
button.addClass('gb')
.hover(function(){
$(this).removeClass(''ui-state-hover'');
}, function(){
$(this).removeClass(''ui-state-default');
});
});
You can unbind the hover event for the button which will keep the class from being added in the first place:
popUpDialog.parent().find('button:contains("Save")').unbind('mouseenter').unbind('mouseleave')
I want to add a class to a link when it is clicked, but I can't use:
$('a.someLink').click(function() {
// code
});
since click seems to detect when a user clicks and lets go of the mouse clicker on an element. I need to add the class as soon as the user has clicked on the element, even before he lets ago of the mouse clicker and after he lets go I need the class to be removed.
Basically I'm trying to mimic css's active state on links:
a:active
How can this be done?
mousedown() would be what you are looking for in the jQuery docs
You can use $('a.someLink').mousedown(function() { //code }); instead
$('a.someLink').mousedown(function() {
//code
});
http://api.jquery.com/mousedown/
With $('a.someLink').mousedown() you can add the class, and then with $('a.someLink').mouseup() you can remove it.
mousedow(): http://api.jquery.com/mousedown/
mouseup(): http://api.jquery.com/mouseup/
Try mousedown which is triggered even before click event.
$('a.someLink').mousedown(function() {
// code
});
I would like to ask how to differentiate between onClick and onMouseOver and onMouseOut.
For instance,
I use onMouseOver to change the tab background to grey using
onMouseOver="this.style.backgroundColor=Blue;"
onMouseOut takes away this background
onMouseOut="this.style.backgroundColor=White;"
How do I write a call for onClick that gives a blue background and keeps it there even when the mouse cursor moves away from the tab?
Thanks
How about you have two CSS classes, "active" and "clicked". They both set the background to blue. On click, you add the "clicked" class. On mouse over, you add the "active" class. On mouse out, you remove the "active" class. If the element had the "clicked" class it'd still have it, and hence keep its color.
You need to work with event listeners. I recommend using a framework for this, like prototypejs or jquery.
You will need event listeners / observers for observing the mouseOver, mouseOut and click events. When your click event fires, you stop observing for mouseOver and mouseOut. This should do the trick.
I would do a check in the MouseOut that only changes the color if it's not already blue.
Normally I would add a CSS class to the element which has the active (last clicked on item) state. That CSS class can have priority over the normal styling of the element.
I would even use CSS and not JavaScript for hover state changes.
Very simple solution is here for your help. Hope it works for you.
<script type="text/javascript">
function row_mout(mout_value) {
document.getElementById(mout_value).style.background = "#FFFFFF";
}
function row_mover(mover_value){
document.getElementById(mover_value).style.background = "#123456";
}
function row_click(click_value) {
if(document.getElementById('chk_'+click_value).checked == true){
document.getElementById(click_value).style.background = "#123456";
document.getElementById(click_value).onmouseout = "";
document.getElementById(click_value).onmouseover = "";
}//if over
else if(document.getElementById('chk_'+click_value).checked == false){
document.getElementById(click_value).style.background = "#FFFFFF";
document.getElementById(click_value).onmouseout = function onmouseout(event){
row_mout(click_value);
}
document.getElementById(click_value).onmouseover = function onmouseover(event){
row_mover(click_value);
}
}//else if over
}