The following code doesn't work. The onClick events are never fired but I see no errors in browserify or console.
var React = require('react');
var Button = React.createClass({
render: function() {
return (
<div className="Button">
<span className="left" onclick={function() {alert("left")}}>Left</span>
<span className="right" onclick={function() {alert("right")}}>Right</span>
<span className="middle" onclick={function() {alert("middle")}}>Middle</span>
</div>
);
}
});
module.exports=Button;
I use alert just for testing small CSS. Why isn't onclick firing?
You have a typo in your example. Use 'onClick' instead of 'onclick'.
<span className="left" onClick={function() {alert("left")}}>Left</span>
see jsfiddle for a working example - https://jsfiddle.net/Ltdc8qpr/1/
Here with arrow function syntax, triggering the event with onClick handler.
<span className="left" onClick={() => {alert("left")}}>Left</span>
I was facing the same issue. The problem was that the <span> tag was in the top-left corner and the alert would only fire when I would click the top-left corner. Not any other space.
I changed <span> to <div> and it worked.
Related
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 would like the following method to be run:
setHeroButtonTextOption(heroButtonText) {
this.builderComponentsService.setPageComponentById(this.componentId, 'heroButtonText', heroButtonText);
}
Each time the user loses focus of the following element:
<div class="builder-components hero-button-click button-outer-container text-center text-md-left mt-5">
<div (click)="selectHeroButton($event, componentId + '-button')"
[attr.data-cy]="'hero-button-container'" [class]="setActiveElement('button')"
[ngClass]="setHeroClass('hero-button')" class="builder-components hero-button-click button-container"
id="{{componentId}}-button" style="display:inline-block">
<button [attr.data-cy]="'hero-button'" [ngStyle]="heroButtonStyle"
class="builder-components hero-button-click btn hero-button">
<span (blur)="removeLineBreaks($event); setHeroButtonTextOption($event.target['innerText']);"
(keydown.enter)="setHeroButtonTextOption($event.target['innerText']); $event.preventDefault()"
[attr.contenteditable]="setContentEditable()" [attr.data-cy]="'hero-button-text'"
[innerText]="heroButtonText" class="builder-components hero-button-click">
</span>
</button>
</div>
</div>
Currently, it isn't happening even though I have a blur event on <span>. How can I fix this?
The blur event will be raised from the button, not the span. If you are trying to include the innerText of the span with the event handler, it looks like it is already bound with heroButtonText, which you can pass as a function argument or reference from the component.
<button (blur)="setHeroButtonTextOption(heroButtonText)">
<span>{{ heroButtonText }}</span>
</button>
Edit - The button should be emitting that blur event. If that isn't working you will need to post more code, it could be that removeLineBreaks($event) is throwing an error, preventing the next call from being made.
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'm pretty new to Ember but this one seems very strange.
I've got a div on a template looking like so:
<div {{action "selectItem" item target="controllers.items"}}> Hello there! </div>
On my controller I have a simple action callback:
WebComponent.ItemController = Ember.ArrayController.extend(Ember.Evented, {
needs: ["settings"],
actions: {
selectItem: function (item) {
//This here won't fire unless I attach it to a <button> not a <div>
},
refreshList: function () {
//blah
},
...
}
},
...
} ...
In full disclosure, I am working inside Phonegap with the emulator.
Any ideas or even directions where to take this investigation?
I figured out the problem. It seems that Ember does not translates click events to touch events automatically (Ember 1.8) for tags like divs, spans, li, etc. It seems to do so for tags like button. So the solution for this is to add an attribute to map the event to the action. Use the on attribute with your action.
<div {{action "selectItem" item on="touchEnd" target="controllers.items"}}> Hello there! </div>
Some browsers/devices will not work properly with no-standard clickable DOM elements. Consider wrapping your <div /> with a link tag <a> and add the click event to the A element.
<a {{action "selectItem" item target="controllers.items"}}><div></div></a>
Second option (which worked for me for Safari on iPad is to just set the cursor to pointer.
<div style="cursor: pointer"></div>
This answer was on the comment of Vincent Gauthier https://github.com/emberjs/ember.js/pull/11373:
<button {{action 'process'}} {{action 'process' on="touchEnd"}}>Submut</button>
This was very helpful for me because when I try to put only on="touchEnd" it stopped working on desktop browser, so the multiple actions are the key