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?
Related
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>
I'm working on improving the accessibility of an HTML page. I have a "refresh" button. Is it possible that every time I click the button, the screenreader will read out "refreshing".
This is my HTML code:
<button id="refresh_btn" title="refresh the content" aria-label="refresh" class="btn btn-default btn-xs"><i class="fa fa-refresh"></i></button>
You have to investigate the aria-live attribute:
<div aria-live="polite" id="ele"></div>
Each time you press the button you can populate the above tag with the text you want using javascript:
<div aria-live="polite" id="ele">Loading</div>
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).
I have a weird issue with Bootstrap Nav-tabs.
I put this button in the third tab that calls a JavaScript simple function that fills up a textarea within the same third tab
<button class="btn btn-success btn-s" onclick="seoRandom()">
<i class="fa fa-refresh"></i></button>
When I click that button, the function works fine but Nav-tab jumps to the first tab.
Any clue to prevent this?
Bootstrap Button Link Not Working see code below:
<ul>
<li>
<a href="home.aspx?Id=146">
<button class="btn btn-primary btn">Button Link</button>
</a>
</li>
</ul>
I use firebug for development, is there an easy place to see what javascript events are attached and to which objects such as this button class? find it hard to debug as don't know what code is being called and on what events for bootstrap and other external js files
Or, you can just use a link which looks like a button..
Button Link
Remove a tag and add window.location.href to button onclick
<button class="btn btn-primary btn"
onclick="window.location.href='home.aspx?Id=146'; return false;">
Button Link
</button>