I'm doing event targeting experiment and compare its execution in vanilla JS and jQuery. I was surprised that the result was different; it was successful in vanilla JS but not in jQuery. If I'm not mistaken, the code for event targeting in jQuery is $(event.target) and in vanilla JS is event.target. In my experiment, I've only got a button inside the <body> tag, and whenever it is being target by an event, the browser is supposed to alert "button element is target", otherwise it will be "window itself is targeted". But the alert notification was only "window itself is targeted" even if the targeted element is the button. Here is my code:
Vanilla JS
let $ = document.querySelector.bind(document);
window.onclick = function(event) {
if(event.target != $('button')) {
alert('window itself is targeted');
} else {
alert('button element is targeted');
}
}
jQuery
$(window).on('click', function(event) {
var $eventTarget = $(event.target);
if($eventTarget != $('button')) {
alert('window itself is targeted');
} else {
alert('button element is targeted');
}
});
In jQuery code, I tried to replace the $(event.target) with event.target to see if its execution would be similar to vanilla JS, but nothing changed. Is it the grammar of my code that makes it fail or is there something else wrong that I just don't notice. I hope someone could point it out to me.
Your test is flawed as event.target != $('button') will always be true as you're comparing a DOMElement and a jQuery object, and $eventTarget != $('button') will also always be true as you cannot directly compare objects.
To fix this compare properties of the objects:
// Native:
let $ = document.querySelector.bind(document);
window.addEventListener('click', function(e) {
if (e.target.id != $('button').id) {
alert('window itself is targeted');
} else {
alert('button element is targeted');
}
});
Note the preferred use of addEventListener() here, over onclick().
Working native example
// jQuery
$(window).on('click', function(e) {
if (e.target.id != $('button').prop('id')) {
alert('window itself is targeted');
} else {
alert('button element is targeted');
}
});
Working jQuery example
Because $('button') and $(event.target), even if they refer to the same Button, they are not the same Object.
The correct way to compare two dom elements using jQuery is to compare their tag / class / id or any other attribute
alert($(event.target) == $(event.target)); // false (same target, different jQuery objects)
alert($('button') == $('button')); // false (same button, different jQuery objects)
alert($(event.target).is('button')); // true (comparing element tags)
alert($(event.target).attr('id') == 'buttonId'); // true (comparing element ids)
alert($(event.target).hasClass('buttonClass')); // true (comparing element classes)
DEMO
Related
how is it possible to replace this jQuery with Vanilla:
$( document ).ready(function() {
$('body').on('click', '.f_click', function (e) {
e.preventDefault();
alert("TEST");
});
});
My first try was:
document.addEventListener('click', function (e) {
console.log(e.target);
if (e.target.classList.contains('f_bme_start')) {
alert('open Search!');
return false;
}
}, false);
this works, but not on child elements.
Has somebody an idea how to solve this?
I want to replace all my jQuery code because of slow performance.....
THANKS
You're only checking the element that was actually clicked, not its ancestor elements.
In modern environments you can use the DOM's closest method (and that link has polyfills for older environments):
document.addEventListener('click', function (e) {
const target = e.target.closest(".f_bme_start");
if (target) {
alert('open Search!');
return false;
}
});
That searches through the ancestors of the clicked element for a match for a given CSS selector. If you were hooking the event on a container element other than the document or document.body, I'd also use contains to make sure the search through ancestors didn't go to an ancestor of the container element:
const target = e.target.closest(".f_bme_start");
if (target && e.currentTarget.contains(target)) {
alert('open Search!');
return false;
}
But there's no need if you're hooking the event on document or document.body.
THANKS a lot!
what is the best solution?
For performance and for compatibility?
I think this one is best?:
document.addEventListener('click', function (e) {
for (var target = e.target; target && target != this; target = target.parentNode) {
console.log(target.classList);
if (target.classList.contains('f_click')) {
alert('open without jQuery!');
return false;
}
}
}, false);
I have a listener which runs when I click on document.
document.addEventListener('click', print);
function print(element)
{
doSomething();
}
It creates div id=panel, where I print some information.
When I run the print function I would like to detect whether I clicked outside of the div#panel (The panel exists when I click second time).
I wish not to use the mouseout event listener because I think it is redundant to use listener for mouse movements when the event click is already fired.
How to detect when I clicked out of div#panel?
You can check the target of jQuery's click event, which element it was:
$(document).click(function(e) {
var target = $(e.target);
if( !target.is("#panel") && target.closest("#panel").length === 0 ) {
// click was not on or inside #panel
}
});
Your event handler gets passed an event object, not an element. Since you are listening for the click event, the event will be of type MouseEvent and that event object will have a target property which you can use to check if the target element matches your desired element.
function handler(event) {
if (event.target == document.getElementById("panel")) {
// Do stuff
}
}
document.addEventListener('click', handler);
Edit: I intentionally gave the vanilla JS answer since your own code fragments don't use jQuery. But jQuery wouldn't change anything as its event handling API is almost just a thin wrapper over JS.
I am just using event from the click. Here it is
var elem=document.getElementById("elem");
var rects=elem.getBoundingClientRect();//get the bounds of the element
document.addEventListener('click', print);
function print(e)
{
//check if click position is inside or outside target element
if(e.pageX<= rects.left +rects.width && e.pageX>= rects.left && e.pageY<= rects.top +rects.height && e.pageY>= rects.top){
console.log("Inside element");
}
else{
console.log("Outside element");
}
}
JS Bin link : https://jsbin.com/pepilehigo/edit?html,js,console,output
A different approach, using only javascript is:
function print(evt) {
if (!(evt.target.tagName == 'DIV' && evt.target.classList.contains('myDiv'))) {
var div = document.createElement('div');
div.classList.add('myDiv');
div.textContent="new div";
document.body.appendChild(div);
}
}
window.onload = function() {
document.addEventListener('click', print);
}
.myDiv {
border:1px solid green;
}
This question already has answers here:
How to have click event ONLY fire on parent DIV, not children?
(12 answers)
Closed 8 years ago.
I'm looking for a jquery function doing the following :
if I click everywhere inside the div (but elements inside this div), the code is executed .
if I click in an html element inside this div , noting happens .
You need to test if the clicked target is this. Fiddle here: http://jsfiddle.net/ZBC43/
$('div').on('click', function(e) {
if (e.target !== this) return;
alert('div clicked');
});
The event is lopped through the element, until a element with a click element is found.
Solutions:
Test if the target element is the same as the delegateTarget
You set the event of the inner elements to a empty function
You need something like this (i try to find parent div with your class):
<div class='foobar'>
<span>child1</span>
<span>child2</span>
</div>
<span>child3</span>
<script>
$('.foobar').on('click', function(e) {
var testelem = $(e.target);
while (testelem != undefined && !testelem.hasClass('foobar')){
testelem = testelem.parent();
}
if (testelem != undefined && testelem.hasClass('foobar')) {
alert('code');
}
});
</script>
http://jsfiddle.net/eaVzx/
You can use tagName dom property to get current target element name.
TagName: Returns the name of the element.
HTML
<div id="myDiv" style='display:inline-block; width:300px;'><span style='display:inline-block;'>Hello Click here</span><br /><span style='display:inline-block;'>Click here</span></div>
Javascript
$(document).ready(function(){
$('#myDiv').click(function (e) {
if (e.target.tagName == "DIV") {
alert('Clicked on Div');
}
else{
alert('Clicked on Inner Element');
}
});
});
Try in fiddle
OR also use nodeName property to get current element.
NodeName: Returns the name of the current node as a string.
Try in fiddle 2
Try this:
$("div").click(function(e) {
if (e.target !== this) return;
alert("inside a div");
});
but very simply, I'd like to prevent the touchmove event on the body element but leave it enabled for another element. I can disable fine... but I'm not sure how to re-enable it somewhere else!
I imagine that the below theoretically works because return true is the opposite of preventDefault, but it doesn't work for me. Might be 'cause $altNav element is in $bod?
JS:
$bod.bind('touchmove', function(event){
event.preventDefault();
});
$altNav.bind('touchmove', function(event){
return true;
});
I'm not sure what lib you're actually using, but I'll asume jQuery (I'll also post the same code in browser-native-js if you're using something other than jQ)
$bod.delegate('*', 'touchstart',function(e)
{
if ($(this) !== $altNav)
{
e.preventDefault();
//and /or
return false;
}
//current event target is $altNav, handle accordingly
});
That should take care of everything. The callback here deals with all touchmove events, and invokes the preventDefault method every time the event was triggered on an element other than $altNav.
In std browser-js, this code looks something like:
document.body.addEventListener('touchmove',function(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
//in case $altNav is a class:
if (!target.className.match(/\baltNav\b/))
{
e.returnValue = false;
e.cancelBubble = true;
if (e.preventDefault)
{
e.preventDefault();
e.stopPropagation();
}
return false;//or return e, doesn't matter
}
//target is a reference to an $altNav element here, e is the event object, go mad
},false);
Now, if $altNav is an element with a particular id, just replace the target.className.match() thing with target.id === 'altNav' and so on...
Good luck, hope this helps
Use a custom CSS class and test for it in the document handler, eg:
<div>
This div and its parents cannot be scrolled.
<div class="touch-moveable">
This div and its children can.
</div>
</div>
then:
jQuery( document ).on( 'touchmove', function( ev )
{
if (!jQuery( ev.target ).parents().hasClass( 'touch-moveable' ))
{
ev.preventDefault();
}
});
http://tinyurl.com/mo6vwrq
you can add a argument,like this
$bod.bind('touchmove', function(event,enable){
if(enable){
event.preventDefault();
}
});
I have a function that I am calling with two images like so.
$('#image1').bind('click',doNext);
$('#image2').bind('click',doNext);
I need to be able to tell which one called the function.
function doNext(){
if(target == $('#image1'){
alert('image1');
}else{
alert('image2');
}
}
this within doNext will be the raw DOM element, so:
function doNext() {
if (this.id === "image1") {
alert('image1');
}else{
alert('image2');
}
}
There I'm branching on the id because you specifically did that in your code, but usually you just interact with the object.
If you need to use any jQuery functions, wrap the raw DOM element in a jQuery object (var $this = $(this);), but you don't need to if all you want to do is look at the id as I did above.
Within jQuery event handlers, there are (at least) two significant DOM elements you have access to: The element on which you hooked the event (this), and the element that triggered the event (event.target). In your case, assuming that image1 and image2 are img elements, they'll be the same because img can't contain any other element, but in the case of elements that can contain other elements (div, p, etc. — e.g., most elements), event.target may be different from this. Say you have:
<div id="foo">
<p>Blah blah blah</p>
</div>
and this
$("#foo").click(function(event) {
alert(this.tagName);
alert(event.target.tagName);
});
If you click the paragraph, you'll get
DIV
P
...because you hooked the event on the div, but it was triggered by a click on the p. (This is the basis of event delegation.)
var id = $(this).attr('id');
if (id == 'image1') {
alert('image1');
} else{
alert('image2');
}
Use the attr() function to retrieve the ID of the element. Also, I would further simplify this by adding a common class to both images so that you can do this:
$('.myimages').click(function() {
if($(this).attr() == 'image1') {
alert('image1');
}
else {
alert('image2');
}
});
You can use event.target:
function doNext(event){
if($(event.target).attr('id') == 'image1'){
alert('image1');
}else{
alert('image2');
}
}
You can get the event.target in the event handler function:
function doNext(event) {
var target = event.target;
}
Alternatively, this will refer to the clicked element:
function doNext() {
var clickedID = this.id;
}
$(document).ready(function() {
$('#image1').click(function(){doNext('image1')});
$('#image2').click(function(){doNext('image2')});
});
doNext = function (target){
if(target == "image1"){
alert('image1');
}else{
alert('image2');
}
}