How to get Mouse-Entered Element ID? - javascript

Is there any solution to get object id while mouse entering it?
Something like this:
mouseenter(function () {
alert(ObjectName);
});
MORE:
Suppose that I have tens of DIV in my page and I want to change their color when mouse entering them, so I won't do that till i know the object ID, On the other side I can not set mouse enter function for any of them separately.

Suppose you have divs:
<div id="div1" class="list-item"></div>
<div id="div2" class="list-item"></div>
<div id="div3" class="list-item"></div>
With jQuery just do this to get the id:
$('.list-item').mouseenter(function (event) {
alert(event.target.id);
});
That said, you don't have to know the id to change the color because event.target is the div you want to change, I assume. So just do something like:
$('.list-item').mouseenter(function (event) {
$(event.target).css({backgroundColor: '#F00'});
});
$('.list-item').mouseleave(function (event) {
$(event.target).css({backgroundColor: ''});
});

if mouseenter is the jquery event handler then
$("<selector>").mouseenter(function(){
alert(this.id);
});

Related

Run Child's Onclick But Not Parent's Where Argument is Passed

Given some simple HTML such this, where one element has an onclick function and it's child also has an onclick function:
<div style='background-color:blue;width:500px;height:500px;'
onclick='thing1();'>
<div style='background-color:red;width:100px;height:100px;'
onclick='thing2(57);'></div>
</div>
What would be the correct approach so that when a user clicks the child element, only the child's onclick is executed and not the parent's, but when the parent is clicked, it's onclick is still executed? I see that event.stopPropagation() would be the correct way to go, but since I'm passing an argument to the function thing2(), I can't seem to pass the event as well. For example:
function thing2(a,ev) {
// Do something with a
ev.stopPropagation();
}
Doesn't work, failing with the error TypeError: ev is undefined.
JQuery is fine.
The event is the first param.
function thing2(ev) {
var a = ev.target
ev.stopPropagation()
}
Secondly, it's best not to use onclick=. Instead, give your div classes or ids and do something like this:
<div class="thing-1" data-thingy="57">
<div class="thing-2" data-thingy="65"></div>
</div>
<script>
$('.thing-1').click(function (ev) {
ev.stopPropagation()
parseInt($(ev.target).data('thingy'), 10) // 57
})
$('.thing-2').click(function (ev) {
ev.stopPropagation()
parseInt($(ev.target).data('thingy'), 10) // 65
})
</script>
When you call a function on click, no event will be passed as argument and it somehow you can do that, that is not a Jquery object and that will not have stopPropagation property. SO you need to define jQuery click event handler for both divs, let's give them ids div1 and div2.
HTML
<div id="div1" style='background-color:blue;width:500px;height:500px;'>
<div id="div2" style='background-color:red;width:100px;height:100px;'></div>
</div>
In Javascript,
function thing2(ev) {
// Do something with a
console.log(ev);
alert('hi2');
ev.stopPropagation();
}
function thing1(ev) {
// Do something with a
alert('hi1');
}
$('#div1').click(thing1);
$('#div2').click(thing2);

Multiple select divs with CTRL pressed

I have 10 divs
<div id="div_1" class="myDivs"></div>
<div id="div_2" class="myDivs"></div>
<div id="div_3" class="myDivs"></div>
...
O want to select 5 of them with a click handler using jQuery.
$(".myDivs").on("click", function() {
console.log('all clicked DIVs IDs...');
}
Is there a functionality to do this with jQuery? I would like to click them and get all IDs of the clicked divs. Thanks for your help!
This does the trick:
$(".markDIV").on("click", function (evt) {
if (evt.ctrlKey)
$(this).toggleClass("marked");
});
Toggle a class on each clicked div, then get an array of the ids of the divs with the class. The clicking of CTRL is a little redundant when using div elements. Try this:
$(".myDivs").on("click", function() {
$(this).toggleClass('selected');
var selectedIds = $('.selected').map(function() {
return this.id;
}).get();
console.log(selectedIds);
});
Example fiddle

How to exclude Id from focusout

With Jquery, focusout is just called when you click anywhere out of the focused area when "focusout" is set.
How do I exclude some id(s) from activiting the "focusout" function. ?
e.g here.
You have an input text field ( id="A")that hides some div on focus and shows that very div when it's out of focus, so but now it obviously will show the div when you click anywhere out of this ("#A") input field.
Question is, how do you set some id(maybe a select field(Id="B" next to it), not to fire off the "focusout" function. Hope it makes sense.
Try using relatedTarget event property:
$('#id').focusout (function (e) {
if (e.relatedTarget && e.relatedTarget.id === 'dontFocusOut') {
return;
}
//do your thing
});
You can unbind the focusout when you click on a div. This may return some expected results, and at some point in your code you'll probably want to rebind it. See here for an example: http://jsfiddle.net/hdCFA/
$("input").on("focus", function() {
$(".hidden").show();
});
$("input").on("focusout",function() {
$(".hidden").hide();
});
$(".clickable").on("mousedown", function() {
$("input").unbind("focusout");
});
HTML:
<input />
<div class="hidden">Hidden div</div>
<div class="clickable">Click me</div>
CSS:
.clickable { background:blue; }
.hidden {
display:none;
}

jQuery making selection

I have a nested div like this
<div id="one">
<div id="two">
id two goes here
</div>
<div id="three">
id three goes here
</div>
<div id="four">
id four goes here
</div>
</div>
Now i want to handle click and doubleclick events on all divs except in div#four,
like this
$('#one').live('dblclick', function() {
my javascript code goes here
});
('#one').live('click', function() {
my javascript code goes here
});
How can i use the above script and exclude the last nested div #four.
Thanks
Like this:
$('#one, #one > div').not('#four').delegate('dblclick, click', function(){
// my javascript code goes here
});
EDIT: Based on further clarification, try this:
$('#one').bind('click dblclick', function( event ) {
var id = event.target.id;
if(id == "one" || id == "two" || id == "three") {
if(event.type == "click") {
// code for click event
} else {
// code for double click event
}
}
});​
EDIT: Based on our conversation under another answer, it seems like you want the #one element to be clickable, but none of its child elements. If that is right, try this:
$('#one').click(function() {
// code to run when `one` is clicked.
}).children().click(function( event ) {
event.stopPropagation();
});
Now if there's any text in #one, the code for that element will fire, but it will not fire when you click any children of #one.
Let me know if that was what you wanted.
EDIT:
If you are saying that you will have a dynamic number of elements inside #one, and the last one will not get the event, then do this:
$('#one').delegate('div:not(:last-child)', 'click dblclick', function( event ) {
if(event.type == 'click') {
// do something for the click event
} else {
// do something for the double click event
}
});​
Note that this assumes there will not be nested divs. Results may be unexpected if there are. Also, the #one element doesn't fire events. Only its children.
Original answer:
$('#one,#two,#three').bind('click', function(){
// code for click event
})
.bind('dblclick', function() {
// code for double click event
});
Or replace .bind with .live if you really need it.
I would use an additional class:
HTML:
<div id="one">
<div id="two" class="clickable">
id two goes here
</div>
<div id="three" class="clickable">
id three goes here
</div>
<div id="four">
id four goes here
</div>
</div>
JS:
('.clickable').live('click', function() {
});
Use not method, more on this here: How can I exclude these elements from a jQuery selection?
You must use $('#one') instead $('.one') aren't you?
$("div:not(#four)")
or
$("#one :not(#four)")
Will select any div that does not have the id="four" set. Basically the :not is what you are looking for. Anything in the :not parenthesis is negated for selection purposes.
http://api.jquery.com/not-selector/
An alternative is to attach a single click/double click handler to the parent which means no need for .live or anything, and in the handler ensure that you are receiving a click from an acceptable child with $(event.target).is(":not(#id)")
$("#one").click(function(event) {
if (this != event.target && $(event.target).is(':not(#four)')) {
// do work on event.target
}
});
// ...

Event handler triggered twice instead of once

I am sorry that I have asked two questions in a few minutes.
In a html file, I got three child DIV tags in a parent DIV tag:
<div id="container">
<div id="frag-123">123</div>
<div id="frag-124">124</div>
<div id="frag-125">125</div>
</div>
Now when I click either the three child DIV tags, I will see two alert boxes pop up instead of one:
The first alert box will show something like this:
frag-123, and the second alert box will show something like this:
container
I dont know why.
I just want to get the ID value of a child DIV, not the one from the parent DIV.
<script>
$(function() {
$("div").click(function() {
var imgID = this.id;
alert(imgID);
});
});
</script>
Please help.
This is a case of event bubbling. You can stop event bubbling by giving
e.stopPropagation()
inside the click event handler.
Try
$(function() {
$("div").click(function(e) {
var imgID = this.id;
alert(imgID);
e.stopPropagation() // will prevent event bubbling
});
});
If you want to bind click event to only child elemets inside the container div then you can give like this
$("#container div").click(function(){
var imgID = this.id;
alert(imgID);
});
That's because you're binding the event handler to all DIVs. Instead, what you want is bind it only to DIVs within container:
<script type="text/javascript">
$(function() {
$("#container div").click(function() {
var imgID = this.id;
alert(imgID);
});
});
</script>

Categories