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 !
Related
I have a quick view button inside a router-link and when I click it, the router-link keep submitting. I do not want the router-link to submit to the quick view button event. Instead I just want to show the quick view popup window right there. Something similar to this link
Unconditional. When you hover over the image a quick view button show and when you click it, the quick view window popup. And when you just click product image instead of the quick view button, it take you to a different page. That is what I want to achieve. How can I achieve this? If there is a different way to it, I would love to see that too.
<router-link tag="li" :to="{name: 'Product', params: {product}}"
v-on:click.native="getItem">
<div class="container">
<img :src="product.image" alt="" class="card-img">
<div class="overlay">
<button #click="active = true">Quick View</button>
</div>
</div>
</router-link>
This will resove the issue:
<button #click.prevent="active = true">Quick View</button>
.prevent modifier will prevent the button to do what is meant to do by deafult
Or you can do it by adding 'type="button"' to your button (it won't trigger the submit)
<button type="button" #click="active = true">Quick View</button>
What you are looking to do is to prevent the default action on the button click.
You can read about how to do this here: https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers
<button v-click.prevent="onClick"></button>
Have a quick read of the docs as you also might want to use .stop
Function does not fire on click event, on the certain div and everything what is inside
It is a functional component, my goal is to put onClick eventListener on reactFBLike component, I tried putting a ref on it, and then assigning eventList. also tried to wrap that in a , and with target _self, and add EventListeners to them - no result.
<SocialWidget title={t('social/title')}>
<div className="socialWidget-icons">
<a
aria-label="Facebook"
className="socialWidget-iconLink link--unstyled"
href={url.facebook}
>
<Icon
className="icon icon--base socialWidget-icon"
kind="icon-facebook"
/>
</a>
<a
aria-label="Instagram"
className="socialWidget-iconLink link--unstyled"
href={url.instagram}
>
<Icon
className="icon icon--base socialWidget-icon"
kind="icon-instagram"
/>
</a>
</div>
<a
onClick={() => console.log(work)}
onKeyDown={doSmth}
traget="_self"
>
<ReactFBLike
href={url.facebook}
language={language}
share={false}
showFaces={false}
width="288"
/>
</a>
</SocialWidget>
Expected onClick to work, actual - no output.
The react-fb-like source code executes some arbitrary script from facebook.net, which in turn executes another script - the minified code is very hard to reason about, but Facebook's Like button documentation does not show any way for custom event handlers.
So if the parent element's onClick event never fires, that means the element inserted by Facebook's script stops event propagation. No idea if it might be against their policy to add any custom behaviour, I only found "Don’t obscure or cover elements of social plugins."
I do not believe there is an easy way how to solve your problem :(
There are some consideration about that piece of code:
There is a typo in traget (that should be target).
Wrapping the ReactFBLike component with an a element is not a good idea to permform onClick event. A span element is a better choice.
To perform a simple text link log event this is the snippet
function handleClick(e) {
e.preventDefault();
console.log('Something...');
}
return (
<a href="#" onClick={handleClick}>
click Here
</a>
);
or if you don't want to prevent default behaviour
return (
<a href="#" onClick={e => console.log('Something...')}>
click Here
</a>
);
in your case try this
return (
<span onClick={e => console.log('Something...')}>
<YourComponent />
</span>
);
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>
I have Two Pages that both of them has an image that is used as a Close Button. This is HTML Code :
<div id="bioPage">
<img id="closeBtn" src="Images/CloseButton.png" alt="Close Button" />
</div>
<div id="skillsPage">
<img id="closeBtn" src="Images/CloseButton.png" alt="Close Button" />
</div>
& I want to write a code just once to close pages when the Close Button in them clicked. So I wrote this :
$('#closeBtn').click(function() {
var parentDiv = $(this).parents('div:first');
parentDiv.css('left', '-100%');
$('nav').animate({
'left': '0px'
}, 500);
});
But It works for the First Page & Second Page doesn't close when the Close Button clicked.
This is expected behavior. Identifiers in HTML must be unique. You can use a common class with the elements then easily use Class Selector (“.class”)
HTML
<img class="closeBtn" src="Images/CloseButton.png" alt="Close Button" />
Script
$('.closeBtn').click(function() {
});
You can use something like this
$('[id="closeBtn"]').click(function(){
//function here
});
Id of every element in DOM is suppose to be unique. But here, the "closeBtn" Id is used twice(for both close button element). So you should provide "closeBtn" as class, rather than Id.
Here is a case:
<a href="#1" style="height:100px; width:100px;">
<div class="#2"></div>
<div class="#3"></div>
<div class="#4"></div>
<div>
<input onclick="#5" />
</div>
</a>
By default, if I click on #2,#3,#4,#5 I will be redirected to #1.
So how I have to fix CSS if I want to click on the input without #1 activation?
Thanks in advance!
Just put a
return(false);
at the end of the JavaScript that is executed when clicking the input.
Yep, you can do it like this:
<a href="#1" style="height:100px; width:100px;">
<div class="#2"></div>
<div class="#3"></div>
<div class="#4"></div>
<div>
<input onclick="doSomething(); return false;" />
</div>
</a>
Assuming your tag is written correctly, use z-index:
<input type="button" style="z-index:99" onclick="foo()" />
Though I wonder if you should rethink your page layout and avoid such a large link tag...
This is an interesting problem that I faced several times.
You basically need to listen for the click event on the parent element, then check if it's an anchor or other element and then act upon it.
$('YOUR ELEMENT').click(function (e) {
var target = $( e.target );
if ( target.is( "a" ) ) {
Do something
}
else if (target.is( "input" ))
{
Do something else
}
});
Although I wouldn't recommend having an anchor as a wrapper to div as it breaks in some cases, with this approach you can easily use a wrapper div with a data-link attribute and navigate to this link programmatically through JavaScript