Develop Reference

remove parents onclick function on child button

here i have a button inside a div . i have wrapped the main div inside a Link tag , which means whenever i click anywhere inside the div it will route me to the path given. but i dont want that to be applied on my button. i want the button to perform entirely different function rather than routing when clicked?
is than even possible ?
here's the code
<Link to={`/shop/${book.id}`}>
<div className='book-card'>
<img src={book.image} alt="" />
<h3>{book.title}</h3>
<div>
<p>Rating :{book.rating}</p>
<p>${book.price}</p>
</div>
<button onClick={()=> console.log('Clicked')}>Add To Cart</button>
</div>
</Link>
thanks :)

Of course. It's possible.
This is bubbling concept. Using e.stopPropagation can perform it.
<button onClick={(e)=> { e.stopPropagation(); console.log('Clicked')}}>Add To Cart</button>
Ref: https://javascript.info/bubbling-and-capturing
Enjoy !

I have a dynamic html template. Which forms when I click on a button. Now, the problem is When I click on one button all buttons are clicked

Here is the html template forms when I click on a button.
<div class="detail">
<h3>${element.name}</h3>
<p>Phone: ${element.phone}</p>
<button onclick="addToHistory()">Call</button>
</div>`
Let's say it creates two template as it is.
<div class="detail">
<h3>Person1</h3>
<p>Phone: 0111111111</p>
<button onclick="addToHistory()">Call</button>
</div>`
<div class="detail">
<h3>Person2</h3>
<p>Phone: 0111111111</p>
<button onclick="addToHistory()">Call</button>
</div>`
Now, I want to click on one button and then according to my click I want the data of clicked divs should store.
I tried this using event handler as you can see with addToHistory() function. But, it stores all the data both I clicked and not clicked also.
Please note: I want to do this only using JavaScript. Thank you for your support.

You can pass this into your method and use that to traverse within the specific detail container where the button was clicked.
this will reference the specific element the event occurs on
function addToHistory(el){
console.log(el.previousElementSibling.textContent);
}
<div class="detail">
<h3>Person1</h3>
<p>Phone: 0999999999</p>
<button onclick="addToHistory(this)">Call</button>
</div>`
<div class="detail">
<h3>Person2</h3>
<p>Phone: 0111111111</p>
<button onclick="addToHistory(this)">Call</button>
</div>`

Google Analytics - Get nested span event click without class and id

I am using Tag manager and Anayltics 360.
My code as follows,
<div rel="ABC_Links" class="ak_widget" >
<!-- BEGIN: Widget - Links -->
<section class="mfb-30">
<div class="widget_links">
<div class="widget_container">
<div class="widget_content">
<button type="button" class="buttonShadow" onclick="window.open('https://somepagelink.aspx); return false;">
<div class="widget_item">
<div class="widget_icon">
<svg>123</svg>
</div>
<div class="widget_text"><span style="overflow-wrap: normal;">ABCD TEXT</span></div>
</div>
</button>
<button type="button" class="buttonShadow" onclick="window.open('https://somepagelink.aspx); return false;">
<div class="widget_item">
<div class="widget_icon">
<svg> 12345</svg>
</div>
<div class="widget_text"><span style="overflow-wrap: normal;">XYZ TEXT</span></div>
</div>
</button>
</div>
</div>
</div>
</section>
<!-- END: Widget Links --></div>
I have 12 buttons in this same format. Here i have given an example of two buttons.
Button name i can change later so i can not take it as hard coded for "Click Text" in tag manager.
I can use only rel= "ABC_Links" as unique identifier. I can not use any of below class as they are not unique.
I have used Custome javascript to get parent child relationship but didn't work.
I have used DOM element variable but it did not work.
Now Question is, Is there any way to trigger event in tag manager when i click on any of the button below and get the info in real time event in Anayltics 360 ???

One way to achieve this would be to create a User-Defined Custom JavaScript variable in GTM to set isABCLink=true on button click.
On the Variables screen under Built-In Variables make sure you have "Click Element" ticked.
Create a User-Defined Variable
Name: isABCLink
Type: Custom JavaScript
Code:
function() {
return {{Click Element}}.matches("div[rel=ABC_Links] button, div[rel=ABC_Links] button *");
}
Create a Trigger
Trigger Type: Click - All Elements
This trigger fires on: Some Clicks
Conditions: isABCLink equals true
Set up your tag firing on above trigger
Once caveat to point out is that the exact element clicked on could be the button or one of the child elements of the button such as the <svg> which might make it hard to set up your tag depending on what exactly you need.

HTML element in button prevents disabled in the wrapper element

Fiddle: http://jsfiddle.net/0o1mrapd/20/
Angular stackblitz link: https://stackblitz.com/edit/angular-fhtaki?file=src%2Fapp%2Fapp.component.html
I have a complex case which i need some enlightenment. (For angular developers, you can think the wrapper div as a host selector, <my-button></my-button>)
As you can see in the fiddle I have a disabled button with a wrapper div which has a click event.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
<span>Click</span>
</button>
</div>
What I expect is that when I click on that area, nothing will happen but alas I get the alert. If I remove the span element and put plain text inside the button, this works.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
Click
</button>
</div>
How can I make the div unclickable in this case? I found out that pointer-events: none does the trick but then I lose the curser-event which I need for accessibility
I stumbled upon this issue while creating a custom button component with an ng-content in Angular but then realized this is bigger than the framework.
Some links i checked:
Can you prevent an Angular component's host click from firing?
Add CSS cursor property when using "pointer-events: none"
How to stop event propagation with inline onclick attribute?
https://github.com/angular/angular/issues/9587

Maybe this example will be useful
function clickHandler() {
console.log('Click');
}
<div onclick="return false;">
<button onclick="clickHandler()">
Click
</button>
</div>

You can use this css property to avoid click event be fired in the span tag. It could be a workaround.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
<span style="pointer-events:none;">Click</span>
</button>
</div>

Strip element of Knockout binding

Quick question that I am probably just having a hard time asking correctly and therefore having a hard time figuring out how to accomplish this -
http://jsfiddle.net/RsKUS/
When I click on the div I want to take one action but if there is a button nested inside the div I only want to perform that action, not both.
<div data-bind="click: clickOne">
<p>It's here too...</p>
<button data-bind="click: clickTwo">Child</button>
</div>

You need to set the clickBubble: false on the inner handler to prevent the click event bubbling:
<div data-bind="click: clickOne">
<p>It's here too...</p>
<button data-bind="click: clickTwo, clickBubble: false">Child</button>
</div>
Demo JSFiddle.
See also in the click binding documentation: Note 4: Preventing the event from bubbling