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>
);
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 !
<a href="myList/doctor">
<div>
<span> The important Info
<a data-toggle="modal" data-target="#mapModal">
<a data-toggle="modal" data-target="#mapModal"
id="obliqueIcon"> <oblique
class="iconSize">i</oblique></a>
</a>
</span>
</div>
</a>
document.getElementById("obliqueIcon").onclick = function(e) {
return false; // or use e.stopPropagation() and e.preventDefault()
}
I have the above code.Here the div can be clickable but the 'i' button here should open up a model box (data-target="#mapModal") but it is not since the anchor tag contains the 'href'.
What I am trying to do is let this code should not be changed but when I click on the oblique it should open up a model box but not redirecting to the link.Is there any way to restrict it.Please suggest help.Thanks.
So there are a couple of issues with your HTML: first, there isn't an <oblique> tag (did you mean <i>?), and second, you can't nest an <a> tag within another <a>.
That said, though, the more general form of what you're asking for -- a node within a link tag that will not fire that link if clicked -- is possible; all you need to do is prevent the click event from bubbling up from that node to the anchor tag:
document.getElementById("foo").onclick = function(e) {
// open your modal here
return false; // or use e.stopPropagation() and e.preventDefault()
}
<a href="https://example.com">
This should link to the other page...
<span id="foo">but this should not</span>
</a>
Added to the answer in response to comments below: here's the same code snippet applied to your HTML:
document.getElementById("obliqueIcon").onclick = function(e) {
return false; // or use e.stopPropagation() and e.preventDefault()
}
<a href="myList/doctor">
<div>
<span> The important Info
<a data-toggle="modal" data-target="#mapModal">
<a data-toggle="modal" data-target="#mapModal"
id="obliqueIcon"> <oblique
class="iconSize">i</oblique></a>
</a>
</span>
</div>
</a>
I do not get the error message you're reporting ("Cannot set property 'onclick' of null") but at a guess it may be because you're continuing to use invalid HTML (the nested <a> tags) -- possibly that's making those nodes inaccessible in some browsers? (I'll stress that this is only a guess; I don't have a lot of experience working with invalid HTML other than by fixing it, so I don't have a solid understanding of how all browsers might handle it. I've tested Safari, Chrome and FF, all work correctly even with the invalid HTML, but if you're using a different browser perhaps that's the cause. If you see the error on my second snippet but not on my first snippet, that would confirm the guess. If you see no errors in either snippet, then you have something else going wrong in your code.)
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.
I have the following html code:
<a class="button-dashboard-save" href="#" onclick="return interface.saveChanges();">Save</a>
inside the interface.saveChanges() i want to get the element object that fired that function, I mean the whole a element.
Regards,
If I have understood correctly, you want to reference the anchor element <a> inside interface.saveChanges. In this case you can directly pass the this keyword to the function. The code should look like:
<a class="button-dashboard-save" href="#"
onclick="return interface.saveChanges(this);">Save</a>
Use this inside the inline onclick. It will pass the current clicked element in your case.
<a class="button-dashboard-save" href="#" onclick="return interface.saveChanges(this);">Save</a>
Define a event handler function ( using jquery for simplicity ):
$(".button-dashboard-save").click ( function ( eve ) {
return interface.saveChanges ( eve.target );
});
This provides interface.saveChanges with the triggering element as a parameter.
Your html slightly simplifies:
<a class="button-dashboard-save" href="#">Save</a>
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