I have a primefaces p:treeTable, inside that I define a column includes 2 components: span tag and h:outputText tag. Currently, if I click on one of these elements, select event of table is triggered. But my purpose is that the select event will be fired only if I click of the text (and not for the span element). How can I do that?
You can prevent the event from bubbling up the DOM, by using JQuery's event.stopPropagation() function.
<span id="someId" onclick="if(event.stopPropagation) event.stopPropagation();">...</span>
JQuery API - event.stopPropagation
Related
Hey I have a div which is wrapped by a Link component, and inside that div I have more buttons, but the problem is, when I click on the inner smaller buttons, I actually click on the Link component as well, so I get redirected which is not what I want... How do I fix this?
it seems as though both the link and the button get clicked but if i am intending to click the button only i want to avoid the parent link.
What I mean is, the Link is used to navigate to some URL when you click on it. Putting elements inside that for other tasks. like a blog post, you click on the parent it will redirect you, but on the child the button will allow you to delete it
was coding this in nodejs react so i was using onClick events
example
<Link to="/blog-post">
<div className="link-post-container">
...blog
<button className='deleteButton'></button>
</div>
</Link>
I have tried event.stopPropagation on the button but it still doesn't seem to do anything. Is it because the Link is an href instead of a onClick?
SOLUTION
so using some of the possible solutions below i started messing around and noticed by in the onClick of the deleteButton, if i add the following in, it works:
event.preventDefault()
with this, the redirect because of the href does not occur anymore and only the button click event will take place
const handleClick = event => {
event.stopPropagation()
// then write rest of your onclick code
}
<button className='deleteButton' onClick={handleClick}></button>
The click event propagates from the button upwards in the DOM tree until it reaches the root (simplified explanation - you can learn more about event propagation here). This is why the link also registers it and runs its onclick handler, redirecting you to another site.
You can call event.stopPropagation() inside your button's onClick handler to stop the event from reaching the encapsulating link.
source
Using Polymer 2 and paper-dialog I have created message boxes for my application. For the usual information boxes with only an OK button I would like the enter key to trigger the same handler as the button does. Any idea how to accomplish this?
Note that I also implemented an InputBox and there I used the on-keydown event of the single input element. But for an information box there is no text input element - only static text and an OK button.
You could use a keydown-handler on the paper-dialog itself, and have that handler trigger the button's click-handler:
<paper-dialog on-keydown="_onDialogKeyDown">
<button id="myButton" on-click="_submit">OK</button>
</paper-dialog>
// in Polymer element
_onDialogKeyDown(e) {
if (e.keyCode === 13) {
this.$.myButton.click();
}
}
demo
Polymer 1.*
I have a custom element that has a form. In addition, there is a few event listeners and custom handlers that I have states for in different parts of the form.
When a user submits the form, I can just do reset() on the form. But this doesn't reset the states inside the handlers I have for my custom logic.
After a user submits the form, I element needs to reset to it's default values. The cleanest way to do this is to destroy the template and re-stamp it. I don't want to have to manually code and reset each object property/variable state.
I can not use <template is="dom-if" if="{{condition}}" reset> because that can only be used in a nested template...which means states/variables/objects persist for the parent template.
Is there a way I can destroy a template and restamp it? Performance hit is not a issue here.
what i suggest you to do is to wrap your form with custom element. so for example you create element called my-form and put iron-form and all inputs inside it. inside your my-form element you will need to propagate events to parent propably, which isn't problem, since there is fire() function you can call in my-form and addEventListener in parent element.
So in my-form you will listening to iron-form onSubmit then call this.fire("formSubmitted"); and in parent element inside (for example) ready function:
this.addEventListener("formSubmitted", function() {
Polymer.dom(this.root).removeChild(this.$$("my-form"));
Polymer.dom(this.root).appendChild(document.createElement("my-form");
}.bind(this));
and that's it. I hope i understand your question right.
I have this DEMO situation:
http://carreradesign.com.br/teste/admin
I'm using a "onClick" on a table row (tr), but I also have a second link on the X image to delete that row... but when I click on the X link, I'm redirect to the tr link too... How can I use the link on the X without redirect to the link on the row?
You can try to use a jQuery event handler for the X button as well. In the event handler for the X button, call event.stopPropagation();. This stops the event from bubbling, preventing the parent from handling the event.
An example:
$('.xbtn').click(function(event){
event.stopPropagation();
...// do stuff
}
I putting together a page that will display a set of stored values. I am using mootools and AJAX calls to update the values without needing to refresh the page each time the user selects a new item from the drop down menus.
the HTML each line looks something like:
<div class="selections">
<input class="checkbox selector" type="checkbox" CHECKED />
<span class="b_name">
<select class="b_n selector">
<!-- options -->
</select>
</span>
<span class="b_level">
<select class="b_l selector">
<!-- options -->
</select>
</span>
<span class="values">
<!-- the values -->
</span>
</div>
In the head I have set up an event listener like:
$$('.selector').addEvent('change', function(event){changeValues(this);});
My problem is that when the "b_name" select changes I have to update the list of options in the "b_level" select. I accomplish that by getting a list of the possible options from my database through a PHP script on another page and replacing "b_level"'s innerHTML. Once I do that, the event listener attached to "b_l selector" no longer works.
I tried to resolve this issue by explicitly attaching an event listener to "b_l selector" each time "b_name" changes like so:
row.getElement('.b_l').addEvent('change', function(event){changeValues(row.getElement('.b_l'));});
where 'row' is the html element 'div.selections'.
It still isn't working and I have no idea what's going on. Can anyone offer a suggestion as to how I can get this resolved? or perhaps a better way to do what I'm doing.
This is how JavaScript works, it's not a bug.
What you need to use is Element Delegation - you attach an event to the parent element, in the same time specifying the element that the event should be delegated to.
Here's a basic example of Element Delegation in action: http://jsfiddle.net/oskar/ENR3E/
And the documentation: http://mootools.net/docs/more/Element/Element.Delegation
When you set innerHTML on an element, the element's contents are completely cleared and replaced with a new set of elements -- the ones parsed from the innerHTML property. Any events set on the old elements will not apply to the new ones.
jQuery provides a solution to this problem with live() events. I found a solution here that apparently achieves the same with mootools.
Your approach is correct, there's probably just a bug in your addEvent() code. The reason the event handler disappears when you replace the innerHTML is straightforward enough - you are removing the elements that the handlers are on, so the handlers are removed as well. But your approach to re-add the handler should work.
I think it's possible that it's a scoping issue. What happens if you reference the div explicitly, like this:
row.getElement('.b_l').addEvent('change', function(event){
{
changeValues($$('div.selections .b_l'));
});