Ok, simple question:
<div onclick="javascript:manualToggle(this)">
<span>Allowed to click</span>
<span>Not allowed to click</span>
<span>Allowed to click</span>
</div>
Without replicating the manualToggle on to the 2 spans that are allowed to click, how can I prevent the "Not allowed to click" span from firing it's parent div onclick event when it is clicked on?
Give the span an id an attach onclick event to it and use
A jQuery sample
$("#spn2").click(function(event){
event.stopPropagation();
});
event.stopPropagation(): Stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
It would make sense to use a library but without you can try this (edited with an entire page to test):
<html><head></head>
<body>
<script type="text/javascript"><!--
function manualToggle(val)
{
alert(val.id);
}
--></script>
<div id="test" onclick="manualToggle(this);">
<span>Allowed to click</span>
<span onclick="event.cancelBubble=true;if (event.stopPropagation) event.stopPropagation();">Not allowed to click</span>
<span>Allowed to click</span>
</div>
</body>
</html>
You need an event handler (it's very easy to do this in something like jQuery) that catches clicks for the spans within the div and only fires the function if, for example, the span has/hasn't a particular class.
I just had the same issue and could not get jQuery to work so I used simple Javascript:
document.getElementById("your_span").addEventListener("click", (event) => {
event.stopPropagation();
});
That did the trick for me. Obviously you need to add the addEventListener to every Element you wanna apply this to. Since I do a lot of DOM manipulation this was not an issue for me.
Hope this helps anyone :)
with mootools you can use the method stopPropagation:
$('myChild').addEvent('click', function(ev){
ev.stopPropagation(); // this will prevent the event to bubble up, and fire the parent's click event.
});
see http://mootools.net/docs/core/Native/Event#Event:stopPropagation
also see this very similar question: How can I stop an onclick event from firing for parent element when child is clicked?
Possible solution: give the span's id's and check whether the clicked id is allowed to be clicked in your function
bad idea: you don't know which span is clicked since you call the function from your div...
<div onclick="manualToggle(this)">
<span>Allowed to click</span>
<span>Not allowed to click</span>
<span>Allowed to click</span>
</div>
<script>
function manualToggle(cur){
if(cur !== event.target) return false;
//CODE
}
</script>
Here we have set a click event on div tag,
and we are passing the current element(div) as parameter
inside the manualToggle function you have the element in params where you have set the event,
inside the function we have event (a global var object), where you can get the clicked element (event.target),
if the clicked element is not same(equal) to the element where we have set the event then do nothing.
there are some other methods are also available, use stopPropagation
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
Related
I am not too advanced in html and javascript. I am just trying to understand, how skyscanner search flights button works. There is no onclick event or function associated with it. Can anyone help me please?
<button class="fss-bpk-button fss-bpk-button--large js-search-button" tabindex="1" type="button">
<span class="bpk-text">Search flights</span>
<span class="bpk-icon-lg bpk-icon-pointer bpk-icon-lg--align-to-button"></span>
</button>
There is no onclick event or function associated with it.
There probably is, it's just:
Added with JavaScript code, not with markup; and/or
On an ancestor element
Most likely #1.
Re #1: Using onclick attributes and such is just one way to put an event handler on a button, and it's a way that's best avoided. Instead, you use modern event handling via addEventListener (or attachEvent on old IE). This might be using the DOM directly, or via a library like jQuery, MooTools, React, Vue, ...
Example using the DOM directly:
document.querySelector(".my-button").addEventListener("click", function() {
console.log("Click!");
});
<button type="button" class="my-button">Click Me</button>
Re #2: click events bubble from the element on which the user clicked to that element's ancestor elements, all the way up to the document element (html). So you can handle that event on an ancestor element, rather than on the button itself. Handling events on an ancestor element is sometimes called "event delegation."
Example:
document.querySelector(".container").addEventListener("click", function(e) {
console.log("Click on '" + e.target.textContent + "'!");
});
<div class="container">
This div contains two buttons. The event handler is on the div, not the buttons.
<div>
<button type="button">One</button>
<button type="button">Two</button>
</div>
</div>
The script is probably called on a button holding "js-search-button" class. There is no need to insert onevent handlers within the HTML element if you can use any script to make use of it.
You can attach events using jQuery or JavaScript.
Below way to attach click event to static element.
$('button[class="fss-bpk-button fss-bpk-button--large js-search-button"]').click(function(){
console.log("clicked!!!");
});
If your element is dynamic then you need to delegate event.
$(document).on('click', 'button[class="fss-bpk-button fss-bpk-button--large js-search-button"]', function(){
console.log("clicked!!!");
});
Hope this will help you.
let say I have a parent element which has so many nested child elements inside of itself:
<div id="p">
<div id="c1">
<div id="c2"></div>
<div id="c3"></div>
</div id="c4">
<div id="c5"></div>
</div>
</div>
I've already bind a click event on the parent:
$('#p').bind('click', function() {
alert($(this).attr('id'));
});
Because the event is assigned to the parent element, I always see the parent id, however, I'm wondering if there is any possible way to find out which of this child elements has been clicked?
I also can't assign any event to the child elements or remove the event listener from parent div.
You need to pass event object to function to get the item that triggered the event, event.target will give you the source element.
Live Demo
$('#p').bind('click', function(event) {
alert(event.target.id);
});
or
Live Demo
$('#p').bind('click', function(event) {
alert($(event.target).attr('id'));
});
Edit
The first method event.target.id is preferred over second $(event.target).attr('id') for performance, simplicity and readability.
You can try the below code. Also try the jsfiddle too(demo).
$('#p').on('click', function(event) {
alert(event.target.id);
});
Try the demo
The answer to your second question is you can assign event to the child and remove from it's parent. Check this out.
.stopPropagation();
Prevents the event from bubbling up the DOM tree, preventing any
parent handlers from being notified of the event. Read more
if you want the specific event to be executed only and allow no other event to be fired you use code below
event.stopImmediatePropagation()
Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree. Read more
I hope this will solve your problem. If you have any questions please don't hesitate to ask. Thanks
If your elements have grandchildren, there is a better way to get just the child. Note the greater than sign.
$('.parent > .child').click(function() {
// This will be the child even if grandchild is clicked
console.log($(this));
});
Is there an efficient way in jQuery to detect if anything other than a specific element (and it's children) has been clicked ??
<body>
<header></header>
<p>stuff<p>
<div class="floating-form">
<form>more stuff</form>
</div>
<footer></footer>
</body>
Whats the best way to remove the floating form, by listening for a click on anything other than the floating form?
Bind a click event listener to $(document) that removes div.floating-form.
Bind a click event to div.floating-form that stops event propogation.
The usual approach is to assign a click event handler to the specific element that does nothing other than stop event propagation. Then assign another click handler to the entire page (i.e. to the document) that removes the element in question. Clicks on the element won't propagate up to the document, so you'll get the functionality you want.
You can use the event.target attribute to determine what element triggered the click.
http://api.jquery.com/event.target/
$(document).click(function() {
//do something
});
$(".floating-form").click(function() {
return false;
});
I am trying to use event delegation inside a containing div tag set to contenteditable. For focus and keypress events the event is captured by the element with the contenteditable set to true. I want the element that the event happened on to be returned. Is there anyway for the event to register on the element you are actually working on without attaching events to each one, or setting every element to contenteditable="true"?
If you click on any of the element d1 it returns element top not d1.
<div id="top" contenteditable="true">
<div id="d1">Edit</div>
<div id="d2">Edit</div>
<div id="d3">Edit</div>
</div>
window.onload=function(){
document.getElementById('top').addEventListener('focus',function(e){
console.log(e.target);
},true);
}
I don't know how to do this in pure js, but I know it can be done in jQuery using .closest()
Even if you don't want to use jQuery, you may search for how it works. Good luck!
Edit:
I've just tested the code here in Opera... Don't know if it's a bug, tough... But using to 'click' instead of 'focus' make it correctly get the id of the inner div
Take a look:
<script type="text/javascript">
window.onload = function(){
document.getElementById('top').addEventListener('click',function(e){
alert(e.srcElement.id); //this alert d1 to d3
},true);
document.getElementById('top').addEventListener('focus',function(e){
alert(e.srcElement.id); //this alert top
},true);
}
</script>
<div id="top" contenteditable="true">
<div id="d1">Edit</div>
<div id="d2">Edit</div>
<div id="d3">Edit</div>
</div>
I'm trying to make a site where the user can click on any element to edit it's CSS. I use the following to add the click function to all <li>, <div> and <ul>.
$('li,div,ul').click(function () {
alert(this.id);
});
The problem is if I click on a <li> element, then I get the alert for that and any element underneath it. (all the containers).
Is it possible to have only the top element trigger when clicked?
You want to stop event propagation, you do this in jQuery by calling the stopPropagation method on the event object.
$('li,div,ul').click(function (e) {
e.stopPropagation();
alert(this.id);
});
I believe you'd want to use stopPropagation(); inside the click function.
It sounds to me like you're looking for .stopPropagation(). Calling stopPropagation will prevent the event from "bubbling" up to parent containers.