I want to stop bubbling when click on image. I cannot set javascript void on href as it is required. I have used stopPropagation but it is not working.
function showurl(e){
e.stopPropagation()
window.location="http://www.yahoo.co.in"
}
<a href="http://www.google.com">
<img src="http://media.expedia.com/media/content/shared/images/navigation/expedia.co.in.png" onclick="showurl(event)" />
</a>
As this was a jQuery question I would suggest never using onclick attributes. They only support a single handler and they are are "ugly" (read: harder to find and maintain) :)
$('img").onclick = function(e) {
e.preventDefault();
window.location="http://www.yahoo.co.in";
}
or
$('img").onclick = function() {
window.location="http://www.yahoo.co.in";
// return false here does the same as e.stopPropagation() and e.preventDefault();
return false;
}
As this handler applies to all img elements, you may want to data-drive the whole thing (using attributes) like this:
Put the target url in the image as a data-url attribute
<a href="http://www.google.com">
<img src="http://media.expedia.com/media/content/shared/images/navigation/expedia.co.in.png"
data-url="http://www.yahoo.co.in" />
</a>
And code-wise:
$('img").onclick = function(e) {
// See if image has a data-url attribute
var url = $(this).data('url');
if (url){
window.location=url;
// only prevent default if it was an image with a link attribute
e.preventDefault();
}
}
I would suggest binding it from JS, even with a basic onclick then use return false; or use preventDefault. (demo)
document.getElementsByTagName("img")[0].onclick = function() {
window.location="http://www.yahoo.co.in";
return false;
}
HTML
<a href="http://www.google.com">
<img src="http://media.expedia.com/media/content/shared/images/navigation/expedia.co.in.png" />
</a>
Related
I have following code, but it doesnt work
<a href="Order-addCopy?id=15658">
<img src="img/add.png" onclick="copyOrderPopupMsg()">
</a>
function copyOrderPopupMsg() {
if (confirm("open the following link?")) {
return true;
} else {
return false;
}
}
How can I disable the href link if the user click "cancel" on the popup window?
To cancel navigation using that style of code you have to return from the onclick function.
You are returning from copyOrderPopupMsg but you don't do anything with the result.
You also have to handle the event on the link not the image inside the link.
Note, also that confirm returns a boolean, so wrapping it in an if that generates a boolean is pointless.
A link with no text content is also highly inaccessible, don't forget the alt attribute
function copyOrderPopupMsg() {
return confirm("open the following link?")
}
<a href="Order-addCopy?id=15658" onclick="return copyOrderPopupMsg()">
<img src="img/add.png" alt="Add">
</a>
Modern code also avoids onclick attributes as they have numerous issues (including lack of separation of concerns and weird scoping issues) so I recommend using addEventListener and making use of the event object.
function copyOrderPopupMsg(event) {
if (!confirm("open the following link?")) event.preventDefault();
}
document.querySelector('a').addEventListener('click', copyOrderPopupMsg);
<a href="Order-addCopy?id=15658">
<img src="img/add.png" alt="Add">
</a>
I simple solution
<a href="Order-addCopy?id=15658">
<img src="img/add.png" onclick="return copyOrderPopupMsg()">
</a>
Just add the return in onclick.
You need to remove the link completely.
<img src="img/add.png" onclick="copyOrderPopupMsg()" data-href="Order-addCopy?id=15658">
function copyOrderPopupMsg(event) {
if (confirm("open the following link?")) {
window.location = event.target.dataset.href;
}
}
Make sure you have a full URL. The current one is not valid for this operation.
If you want to use a relative path, you can create a hidden link and click it by function.
<a class="hidden click-when-confirmed" href="Order-addCopy?id=15658"></a>
function copyOrderPopupMsg(event) {
if (confirm("open the following link?")) {
document.quertSelector('.click-when-confirmed').click();
}
}
I think preventDefault would be the best in your case:
function onclickA(e) {
if (!confirm('open the following link?')) {
e.preventDefault();
}
}
<a href="Order-addCopy?id=15658" onclick="onclickA(event)">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/50/Yes_Check_Circle.svg" />
</a>
try this: remove anchor tag and change to this
function copyOrderPopupMsg() {
if (confirm("open the following link?")) {
document.location.href="Order-addCopy?id=15658";
} else {
return false;
}
}
trying to make a link element (<a> element) with href.
Why am I using href and not changing history? because I want the option to open in a new tab in browser.
The Problem is, I have a button inside the element, and when you click on it, it triggers the href immediately, before even getting to stopProppagation or preventDefault inside the onClick handler of the button. It’s like 2 different event types…
something like this:
...
const onButtonClick = (event) => {
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
event.preventDefault();
if (clickDisabled) return;
if (!onClick) return;
onClick(event);
}
return (
<a href={someHref}>
<button onClick={onButtonClick}>open menu</button>
</a>
)
Any ideas?
The workaround I ended up using: instead of the button onClick - I used onMouseDown which happens before the href trigger.
Not the best solution, but was good enough in my case.
const onButtonClick = (event) => {
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
if (clickDisabled) return;
if (!onClick) return;
onClick(event);
}
const handleLink = (e) => {
e.preventDefault();
window.open('https://URL...', '_blank');
}
return (
<a href={someHref} onClick={handleLink}>
<button onClick={onButtonClick}>open menu</button>
</a>
)
I have external link which render image with javascript onclick event.
I need to stop this click event.How can i do this ?
For example:
Html is render by external script:
<div class="demo-link">
<img alt="" onclick="verifylock();" src="https://example.com" style="cursor:pointer;cursor:hand">
</div>
I have tried this with jquery but not get any luck:
$(".demo-link > img").click(function(e){
e.preventDefault();
});
You can remove the onclick value when dom is ready:
$('.demo-link > img').attr('onclick','').unbind('click');
Working Demo
You can always return false from the onClick event handler, call preventDefault, stopImmediatePropagation or other methods, but it would be no use here since HTMLs onclick gets invoked BEFORE jQuery onclick. If you do not want to simply remove the 'onclick' from HTML, you can change it programmatically (and even store it with jquery data() method for future use if needed).
$(".demo-link > img").each(function(e) {
$(this).onclick = function() { // overriding the onclick
return false;
}
});
A working snippet below:
function defaultOnClick() {
alert('Default event handler invoked!');
}
$('.clickable').each(function() {
$(this).data('onClickBackup', this.onclick);
this.onclick = function(event) {
alert('Overriden onclick');
return false;
// if you need to ever call the original onclick, then call below
// $(this).data('onClickBackup').call(this, event || window.event);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="clickable" onclick="defaultOnClick()">Click me!</div>
$(".demo-link > img").click(function(e){
return false;
});
You are writing event on click and calling a function using onclick in img tag. So remove onclick from img tag like.
<img alt="" src="https://example.com" style="cursor:pointer;cursor:hand">
if you want to call a function verifylock() call it from handler for click
Try your own code with return false;
<img alt="" onclick="verifylock(); return false;" src="https://example.com" style="cursor:pointer;cursor:hand">
</div>
In the actual website, when clicking on an image from thumbnails, it opens a slideshow.
I have created a new onclick event:
$('.thumbnails a').click(function(event) {
//my piece of code
});
How can I cancel the existing on click event, not knowing which selector's been used to trigger the event (parent? child? specific class?)
I have tried things like:
event.stopPropagation()
$(this).stop()
with no success.
RE-EDIT--------------------------------------------------------
html starts with:
<div class="images">
<a title="Voyage itinérant en Boutre" rel="prettyPhoto[product-gallery]" class="zoom" href="http://dev.snorkeling-voyages.com/wp-content/uploads/2013/05/snorkeling-madagascar-001_alefa.jpg" itemprop="image">
<img width="462" height="392" class="yit-image attachment-shop_single" src="http://dev.snorkeling-voyages.com/wp-content/uploads/2013/05/snorkeling-madagascar-001_alefa-462x392.jpg">
</a>
<div class="thumbnails nomagnifier">
<a class="zoom first" rel="prettyPhoto[product-gallery]" title="bateau itinerant madagascar" href="http://dev.snorkeling-voyages.com/wp-content/uploads/2013/05/snorkeling-madagascar-002_alefa.jpg">
<img width="100" height="80" class="yit-image attachment-shop_thumbnail" src="http://dev.snorkeling-voyages.com/wp-content/uploads/2013/05/snorkeling-madagascar-002_alefa-100x80.jpg"></a>
jQuery to change the featured image on thumbnails click:
$('.thumbnails a').click(function(event) {
var destination= $('.images >a');
destination.empty();
$(this).prependTo(".images >a");
$('.images a a img').attr('width','470');
$('.images a a img').attr('height','392');
//replace src string
var src=($('.images img').attr('src'));
var pattern = /[100x80]/;
if(pattern.test(src))
src=src.replace("100x80", "462x392");
$('.images a a img').attr('src',src);
$('.images a a img').attr('class','yit-image attachment-shop_single');
});
#bfavaretto comment helped me localise an existing a .zoom click event (very useful thanks)
(how can I know the js file? )
I have added a
$('.zoom a').click(function(event) {
return false ;
// or event.preventDefault();
});
and this does not prevent the slider from being opened still!
You can remove all other click handlers from an element with .off:
$('.thumbnails a').off('click');
In case the event was delegated, you need something like this:
$(document).off('click', '.thumbnails a');
However, you have to do that from outside your click handler, or it may be too late.
You can use .preventDefault() to prevent the link from executing:
event.preventDefault();
jsFiddle here
You can try using either of the two commented statements:
$('a').click(function(e){
//e.preventDefault();
//return false;
});
I did something else If I understand correclty what you want please take a look
off
off
off
off
and the javascript:
$('a').click(function(event){
event.preventDefault();
if ($(this).attr('data-status') == 'on') {
$(this).attr('data-status','off');
$(this).html('off');
return;
}
var areOn = 0;
$('a').each(function(){
if ($(this).attr('data-status') == 'on') {
areOn++;
}
})
if (areOn == 0) {
$(this).attr('data-status','on');
$(this).html('on');
}
})
http://jsfiddle.net/ERMtg/9/
You can use return false, I think that will do
$('.thumbnails a').click(function(event) {
return false;
});
I want to add a JavaScript functionality to an array of thumbnails such that the image would expand upon clicking instead of opening in the current window. I am thinking of having a function within the onclick attribute, but I don't think this work:
<script type='text/javascript'>
function expand(){
this.height = 200;
this.width = 200;
}
</script>
<a href='/image_1.jpg' onclick='expand()'>
<img src='/image_1.jpg'>
</a>
If JavaScript is not enabled, I would like the link to work. Any idea how to go about doing this? Thanks for your time :)
You have to give this as a variable in the function for example ths
<script type='text/javascript'>
function expand(ths){
$(ths).find('img').height('200');
$(ths).find('img').width('200');
return false;
}
</script>
<a href='/image_1.jpg' onclick='expand(this)'>
<img src='/image_1.jpg'>
</a>
And return false says Prusse.
** UPDATED **
If you want to resize image, you must call the image and no link.
Don't use the onclick handler:
Instead:
var elem = document.getElementById("the-id-of-a");
elem.addEventListener('click', function(e) { /* handle event */ e.preventDefault(); return false; });
See: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
Just make the onclick handler return false. Using inline handlers like in your example:
<a href='/image_1.jpg' onclick='expand(); return false;'>