trigger parent click event when child is clicked
You dont need to trigger element click events when child elements are clicked, the click event bubbles
up the dom tree if you dont stop propagation.
Here you can see it working: jsfiddle just click on the blue span, the click event will bubble up to the ul :)
Updated question
If you want the id of the ul, simply to:
$('ul li a').click(function() {
var id = $(this).closest('ul').attr('id');
});
Which would be even easier like so:
$('ul').click(function() {
var id = $(this).attr('id');
alert(id);
});
Working fiddle
This should work if you click on an since it bubbles up
trigger event only on parent click not child
Use event.stopPropagation
to stop event bubbling:
function something() { console.log("something");}document.getElementById('parent').addEventListener('click', something);document.getElementById('child').addEventListener('click', e => e.stopPropagation());
<div id="parent"> Parent info goes here! <div id="child">Child info goes here!</div></div>
Trigger a child click event when clicking on parent
You do not need .each()
at all here.
You can try the following way:
$('.parent').on('click', function(e){
$(this).find('.child').get(0).click();
e.preventDefault();
});
$('body').on('click', '.child', doSomething);
function doSomething(e){
console.log('Child of ' +$(e.target).parent().index() +' parent tiggered');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<a href="#" class="child"></a>
<span>other elements</span>
</div>
<div class="parent">
<a href="#" class="child"></a>
<span>other elements</span>
</div>
Clicking on child does not trigger parent click
Use parentNode to traverse the DOM:
var wrapper = document.getElementById('wrapper'); var content = document.getElementById('content');
wrapper.addEventListener("click",function(e) { var target = e.target; while(target.parentNode && target!==content) {target=target.parentNode;}
if (target === content) { alert('clicked!'); } });
<div id="wrapper"> <div id="content"> <span>HELLO!</span> </div></div>
How do I prevent a parent's onclick event from firing when a child anchor is clicked?
Events bubble to the highest point in the DOM at which a click event has been attached. So in your example, even if you didn't have any other explicitly clickable elements in the div, every child element of the div would bubble their click event up the DOM to until the DIV's click event handler catches it.
There are two solutions to this is to check to see who actually originated the event. jQuery passes an eventargs object along with the event:
$("#clickable").click(function(e) {
var senderElement = e.target;
// Check if sender is the <div> element e.g.
// if($(e.target).is("div")) {
window.location = url;
return true;
});
You can also attach a click event handler to your links which tell them to stop event bubbling after their own handler executes:
$("#clickable a").click(function(e) {
// Do something
e.stopPropagation();
});
React - Prevent Event Trigger on Parent From Child
You can use stopPropagation
stopPropagation
- Prevents further propagation of the current event in
the bubbling phase
var App = React.createClass({ handleParentClick: function (e) { console.log('parent'); },
handleChildClick: function (e) { e.stopPropagation(); console.log('child'); },
render: function() { return <div> <p onClick={this.handleParentClick}> <span onClick={this.handleChildClick}>Click</span> </p> </div>; }});
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="root"></div>
OnClick on child div should not trigger parent div's onClick method for a particular child
you should use event.stopPropagation()
<div className="second" onClick={(event) =>
event.stopPropagation()
console.log("second div")
}>
second
</div>
Child element click event trigger the parent click event
You need to use event.stopPropagation()
Live Demo
$('#childDiv').click(function(event){
event.stopPropagation();
alert(event.target.id);
});
event.stopPropagation()
Description: Prevents the event from bubbling up the DOM tree,
preventing any parent handlers from being notified of the event.
How to only trigger parent ng-click event for target child element
Make the showSubCat
boolean a property of the state
iteration object:
toggleSub(state) {
this.$log.log(state)
//this.$scope.showSubCat = !this.$scope.showSubCat
state.showSubCat = ! state.showSubCat;
}
<tr md-row ng-repeat-start="state in country.states | orderBy: query.order">
<td md-cell><a ng-click="$ctrl.toggleSub(state)">{{state.name}}</a></td>
<td md-cell>-</td>
<td md-cell>{{state.totalCount}}</td>
</tr>
<!-- BEFORE
<tr md-row ng-repeat-end
ng-repeat="subcat in state.data | orderBy: 'subcategory'"
ng-if="showSubCat">
-->
<!-- AFTER -->
<tr md-row ng-repeat-end
ng-repeat="subcat in state.data | orderBy: 'subcategory'"
ng-if="state.showSubCat">
<!-- -->
<td md-cell></td>
<td md-cell>{{subcat.subcategory}}</td>
<td md-cell>{{subcat.count}}</td>
<td md-cell>{{subcat.percentage}}</td>
</tr>
By making the showSubCat
boolean part of the state
iteration object, it will be different for each item in the parent ng-repeat
.
Related Topics
How to Import File from Public Folder in React Application
How to Style HTML Select Option Hover and Selected Option Effects
Hide Menu Sidebar When Clicking Outside the Bar or the Button
Restrict to 2 Decimal Places in Keypress of a Text Box
How to Delete Rows of Data Using Sequelize
React Wait Until Set State in the Same Function
How to Detect String Which Contains Only Spaces
React-Native: Convert Image Url to Base64 String
How to Get Public User All Posts from Instagram, Without Instagram API
How to Import the Following Function in Another File
How to Get Around .Push Is Not a Function in JavaScript
How to Vertically and Horizontally Center a Component in React
How to Kill a Running Process on Windows from Nodejs
How to Set Image to Fit Width of the Page Using Jspdf
Pass Data from HTML Table to Modal and Then to PHP Script