Consider the following:
<a class="addThing">link</a>
$(document).on('click','.addThing',function(){
alert('test');
});
On my iPhone I couldn't get a click event to fire on this anchor until I added href="javascript:" to the anchor. The anchor was added to the DOM after the page load. I'm able to recreate this by using JS to add an anchor to the DOM and confirmed it doesn't register the click, but if I added it on page load it does.
This suggests that the phone/browser/OS is somehow treating the elements differently if loaded to the DOM via javascript, but it's the same HTML.
I have a few questions:
Why does the href need to be there for the click event to fire.
Is there another method to get the event to register? (I was thinking something to do with tab index or something like that.)
Is this specific to OS/Device/Browser/Platform or is this something working as it should per W3C documentation?
Is javascript: the same as javascript:void(0). I came across the void(0) thing while researching this and I've always just done javascript:.
EDIT
Per http://www.quirksmode.org/blog/archives/2010/10/click_event_del_1.html
Answer to 1,2 & 3 apparently because the href in turn adds the CSS styling of cursor: pointer it makes it magically work. I don't have an android device to test.
Answer to #4 is apparently, it's 2016. Not sure what that means.
//use following css for a
a {cursor:pointer;}
Related
I am using a web application and I want to change its behaviour for myself via Tampermonkey. The problem is, that the middle mouse click for opening a new tab doesn't work because the click event is overridden. I have no chance to change the application on server side! So the easiest would be to remove the event.
It is removing the event, when I am removing the event withing the Chrome Developer Tools manually via the remove button:
ChromeDevTools
The app is using jquery-1.11.1.min.js so I want to remove those events via JQuery.
HTML Snippet where the event is attached (also see the screenshot):
XYZ.
I have tried to remove the onclick part in the html and I removed the event via following javascript: (first of all in the Developer Console of Chrome):
$('a#id5214').unbind();
$('a#id5214').off();
But without success. Only removing it via the remove button in the Event Listernes Tab working fine (without any other step).
Am I missing some events when I am doing that via javascript?
You can try this way
$('#id5214').attr('onclick','').unbind('click');
.off() is reccomended and available from JQuery 1.7 and above.
If your document is valid (no duplicated IDs), you should remove "a" tag from selector, because it can cause really bad performance.
Imagine that there's a button on one web page (not mine) and when it's clicked it performs some
Javascript. I want to have a button on my web page that performs exactly the same. So I need to
attach all necessary js files (but first I have to find them) to my html page and sometimes add some js to my html page.
What I usually do in this case? I inspect this button html element to see if there's onclick attribute for this button. If it is, I see the function called when button is clicked and then I try to search for this function in current html page and all js files attached to page. Also I need to find all dependencies (like jQuery, fancybox etc.).
If the button doesn't have onclick attribute I have to look for direct getElementById or jQuery selector pointing to this button with rest of code there. Sometimes there's no such a selector and I have to find a nested selector - really hard and annoying thing.
Is there any better, automated way for doing things above. Ideally after selecting the element in DOM (button in this case) and pressing some magic button I will be able to see all js files involved in processing this click and also js code in html page.
It's going to involve digging no matter what you do. But Chrome's Dev Tools can help with the attached event handlers, to an extent. When you right-click an element and inspect it, on the right-hand side there's a panel showing various tabs: [Styles] [Computed] [Event Listeners] [DOM Breakpoints] [Properties]. The [Event Listeners] one shows the listeners directly attached to that element. Of course, on a site using jQuery (which is more than half the sites using JavaScript at all), looking at the handler will dump you into the jQuery event handling code, but it's a start.
Just as a side point: While it's fine to look at the source of pages for inspiration, or to see how they solved a particular problem, or what plugins they're using to get an effect, etc., I assume you're not grabbing large sections of their actual code (as opposed to libraries and plugins with liberal licenses) without their permission, which is probably not cool.
I am creating a browser extension that modifies the Twitter timeline by adding some links to each tweet row in a user's Twitter timeline.
Generally whenever the tweet row is clicked, Twitter will pop out the right-hand panel with more information, except for when the user clicks links like Retweet, Reply, etc. I'm not sure what Twitter's JavaScript is applying to these links to prevent them from causing the panel to be opened, but I'd like to do something similar. I have tried inspecting the elements in Google Chrome, but the event handlers are not revealed.
Any suggestions?
The event handlers are probably being added programmatically via script. You could try to remove the event handlers (see the docs), but it might be easier to clone the element in question, then hide the original. See cloneNode documentation for information.
Without any sample html, I can't really give you a good example, but here's a generic jsFiddle I threw together to demonstrate the concept: http://jsfiddle.net/sacCK/1/
I solved my problem by stopping the event propagation. This prevented the event from propagating to the event handler for the container element.
With jQuery I was able to apply an onclick handler like so:
$("#elementId").click(function(event) {
event.preventDefault();
event.stopPropagation();
// other actions
});
the a tag is used in Jquery dropdown menus and generally in ajax . But the problem
it refeshes the page . How can I force it not to refresh ?
Thanks,
Use e.preventDefault() in the click handler and return false;.
Just add javascript:void(0) in href
Example: Home
You can add a handler for the click event on your anchors which after doing its work (executing and processing an Ajax request) returns False. This will prevent the event from propagating and calling the default handler (which is to GET the resource referred to by href).
I had a similar issue, and did this to resolve.
Remove the href attribute. Many people will set it to "#" because "it doesn't go anywhere". Not entirely true. It'll take you to the top of the page, which is a pain when you have a scrolling page.
Unfortunately, removing the href tag will remove the normal rules for your mouse pointer.
If you want the cursor to change when someone mouses over it, style your href-less a tags with :-
cursor : pointer
If you do those two things, your a tags won't go anywhere, won't scroll the screen and will look like regular links when a user mouses over them.
I have a onclick event for a href , but if a define a rel the function is not getting called
<a href="http://somewebsite"
onclick="javascript:someFunction('somevalue');"
name="top"
rel="somevalue">testing </a>
If I remove the rel property the onclick is working just fine.
What's up with that?
I'm not sure this is really an answer, but really more of a debugging diagnostic. Plus, it was getting a bit long for use in the comments section.
There are no JS errors for me in either Chrome 7 or FF 3.6.8
There are no apparent unclosed quotes in the anchor tag
While the rel tag is not directly supported by any modern browser (but rather used by search spiders), the consensus is that it shouldn't affect events. In fact, per some user comments, such #James Kovaks, it works fine in his tests.
From the Chrome JS console, the function trackForGA is visible, and executable without error.
Attaching an event with jQuery, and then clicking, fires the event as expected. This tells us the click event is in fact being fired by the browser.
code:
$('#countrytabs li:first').click(trackForGA); // click overview tab
Suggested next steps:
Try other event types, to see if they are affected as well - such as onmouseover.
Begin removing JavaScript that is not related to this particular event. Specifically, the only JS you want to remain is the trackForGa function and the onclick JS. Even remove externally loaded JS, such as jQuery (you can presumably do this on a local test/dev box)
If the problem persists, remove trackForGa and instead just do an alert() from the onclick event.
If the problem persists, run your site through an HTML validator (http://validator.w3.org/)
If the problem persists after fixing validation problems, begin removing unrelated HTML tags and content. Systematically remove items until the click is firing as expected to identify a potential culprit.
Also, you never need to specify "javascript:" in an onclick. The only thing that can follow is JavaScript.