I have an element with an hyperlink. Inside the are also buttons, which should trigger their button actions, without triggering the hyperlink.
Demo code:
<a href="element.html">
<div class="element_card">
This is an card for an element with an hyperlink over the card.
<button type="button" onclick="like_element()">
Like the element but do not trigger the hyperlink.
</button>
</div>
</a>
How can I disable the hyperlink for the button or cancel the event, so that the button area ia only triggering the onclick function for the button but not the hyperlink.
You can use event.stopPropagation() to block the click from travelling up the chain.
You can use event.stopPropagation() to prevent further propagation of the current event in the bubbling phases.
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
See if this works for you.
The default behavior of the <a> tag's onclick and href properties is to execute the onclick, then follow the href as long as the onclick doesn't return false, canceling the event (or the event hasn't been prevented)
See if this works for you.
Answer
<a href="element.html">
<div class="element_card">
This is an card for an element with an hyperlink over the card.
<button type="button" onclick=" return like_element()">
Like the element but do not trigger the hyperlink.
</button>
</div>
</a>
using this inside href javascript:void(0)
function like_element(){
console.log('working....!')
}
.element_card{
background-color: green;
}
<a href="javascript:void(0)">
<div class="element_card">
This is an card for an element with an hyperlink over the card.
<button type="button" onclick=" return like_element()">
Like the element but do not trigger the hyperlink.
</button>
</div>
</a>
Related
I have an anchor tag and a span and an i element embedded in the anchor tag-
<a href="home.html" class="list-group-item" data-toggle="collapse"
aria-expanded="false" style="padding-left: 30px;" id="id1">
<span
id="id2" class="glyphicon glyphicon-eye-close"
style="color: #d6d6d6 !important; font-size: 15px;" title="title1">
</span>
<i class="glyphicon glyphicon-folder-close"></i>
HOME
</a>
When I click on the i element or the span element, the page redirects to home.html the way I want it to.
But I don't want to redirect the page to home.html when I click on the span element. I instead want to bind the span element with a different action for the click event. I know that a quick fix is to have the span outside the anchor tag but unfortunately, I'm constrained to do so as per my requirements. Is there any way around this?
Any help will be appreciated. Thanks in advance.
You can cancel the event of a child element to prevent it from bubbling up to the parent.
Simply return false from the click event.
<a href="home.html">
<span onclick="return clickme();">
CLICK ME
</span>
<i class="glyphicon glyphicon-folder-close"></i>
HOME
</a>
jsfiddle:
https://jsfiddle.net/ksLbrj8y/3/
Note that cancelling the event is subject to a debate all of its own; see this thread for various techniques.
How to stop event propagation with inline onclick attribute?
You'd need to use JavaScript for this. You can add a click event listener to the <span> tag. Then, in the event handler, call .preventDefault() on the click event and redirect the user. Something like this:
document.querySelector('id2').addEventListener("click", function (e) {
e.preventDefault();
window.location = "http://example.com";
});
Be aware that this kinda violates good semantics (i.e. your mileage may vary when dealing with SEO, screen readers, and other non-standard consumers of your site).
Clicking on the button triggers the onClick appropriately but clicking on the icon within the button triggers the onClick as well but without the right data (item.target.className and what not)
<button id={check} onClick={this.changeTimesButton} className="waves-effect waves-light btn"><i className="material-icons">check_box</i></button>
Is there anyway to disable the icon being able to be clicked
using materialize-css in react project
if u cannot handle event.target in this.changeTimesButton(event) :
set onClick() on icon tag then prevent the default action
<button id={check} onClick={this.changeTimesButton}
className="waves-effect waves-light btn">
<i className="material-icons" onClick={(e)=>{e.preventDefault()}}>check_box</i>
</button>
UPDATE
you can use stopPropagation instead of preventDefault
for more details on stopPropagation and preventDefault see this :
What's the difference between event.stopPropagation and event.preventDefault?
I found this html code on a website which is a click button and I want to learn how to click on this button using Javascript. Please someone help me to understand how to click such buttons. I'm trying this from past one hour.
This is the button which I want to click:
<div class="Button">
Tap this button
<div id="ButtonTwo" class="ButtonTest2">
<p class="MeButton" id="ButtonID">Final button test</p></div>
this is not my code. Its from a website.
You need to close the first div with a closing tag. Below is the updated code with the closing tag.
<div class="Button">
Tap this button
</div>
<div id="ButtonTwo" class="ButtonTest2">
<p class="MeButton" id="ButtonID">Final button test</p>
</div>
What is the purpose of enclosing your a tag in a div ? Can't you use only the a ?
You do not have any button in the HTML snipper shown, only div, a, and p
A button would be a <button>.
to click them using your current code you can use
<script>
document.getElementsByClassName("button")[0].click();
document.getElementsById("ButtonID").click();
</script>
A correct, valid and clear code would be
<!-- What is this button meant to do ? Can you use an actual button or do you HAVE to use a <a> ?
<button id="clickUsingJs" class="button yellow-btn addToCart trackEvent" rel="Thebutton" data-action="Tap">
Tap this button
</button>
<script>
document.getElementById("clickUsingJs").click();
</script>
<div class="Button" id="button1" onclick ="call some javascript method">
Tap this button
<div id="ButtonTwo" class="ButtonTest2" onClick="call some javascript method">
<p class="MeButton" id="ButtonID">Final button test</p></div>
try this
I have a twitter bootsrap dropdown ,
<button class="dropdown-toggle" data-toggle="dropdown" >
<span>Select</span>
<span class="pull-right" ng-click="showpopup();">Show popup</span>
</button>
<ul class="dropdown-menu">
...drop down.....
My issue is that clicking on showpopup function also dropdown will dsiplay .( i know it is because of part of drop down).I cannot move showpopup span outside of dropdown.
Clicking on showpopup function should not open drop-down.
Is there any way to achieve this .
Please suggest
You can try to stop propagation after your ng-click function being executed.
Like this:
<span class="pull-right" ng-click="showpopup(); $event.stopPropagation();">Show popup</span>
This prevents the event from being propagated to the outer DOM elements.
I have two divs and I want to show only one of the divs based on clicking a list element. I wrote the following code. Its not working. Its always showing me Div1 (or whichever one I make visible initially). How do I make it show me appropriate div? Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
function showPane(paneId) {
document.getElementById("Div1").style.display="none";
document.getElementById("Div2").style.display="none";
document.getElementById(paneId).style.display="block";
}
</script>
</head>
<body onload="showPane('Div1');">
<ul id="nav">
<li>Div1</li>
<li>Div2</li>
</ul>
<div id="Div1">
<h3>This is Div1</h3>
</div>
<div id="Div2">
<h3>This is Div2</h3>
</div>
</body>
</html>
Because the list items are <a> which redirect you to the same page. than the body onload shows div1.
Add href="javascript:;" to the <a> to prevent this.
Or add the event arg to the function:
<a href="" onclick="showPane(event,'Div1')">
and in the function:
function showPane(event,paneId) {
event.preventDefault();
//rest of code
}
To prevent the default behavior of the MouseClick Event. http://codepen.io/yardenst/pen/cKqIy
Just another variation to the already answered
<li><a href="javascript:showPane('Div1');" >Div1</a></li>
<li>Div2</li>
You can add "return false" to the onclick to prevent it from following the link:
onclick="showPane('Div1'); return false;"
you should edit href="javascript:;"
here is your problem:
<li><a href=""
make those to be
<li><a href="#"
when you do
href=""
that is actually a link to the current page you are on, which triggers the body onload and activates div1 right after the click event.
It shows you div2 but then it quickly gets over-written by div1 again.(Try clicking the link for div2 very fast.) This is because when you click the link, the entire page re-loads and the onload event gets triggered and shows you Div1. To overcome this, use buttons or some other element which does not cause a page reload.
You need to set # to href. Otherwise the page will get reload
<ul id="nav">
<li>Div1</li>
<li>Div2</li>
</ul>