Develop Reference

Click function working, but DoubleClick function not working - jQuery

I am trying to have menu items click to open sub items and then double click to follow through to the link. Have tried a variety of different approaches but for some reason nothing's happening when double clicked.
$( ".site-head .section-menu .mobile-sub-menu ul li .first-a" ).on('click', function(event) {
$( ".sub-items" ).addClass('hiddenMenu');
$(this).parent().find('.sub-items').removeClass('hiddenMenu');
event.preventDefault();
});
$(document).on('dblclick', '.first-a', function() {
console.log("event fired");
window.location.replace($(this).attr("href"));
});
Any suggestions on what I'm doing wrong?
Edit: the standard solution that has been suggested doesn't work in this situation. The double click should direct to link and the first should prevent going to the link and execute some other function...

When you make the first click, don't immediately call the method, instead set a timer that calls the original callback function in say ~0.75 seconds UNLESS you receive a second click. You're firing off an event and handling the first click, so when the second click comes through - it's a single click, not a 'dblclick'

I hope this will help You..
HTML Part
<p ondblclick="myFunction()">Double-click this paragraph to trigger a function.</p>
<p id="demo"></p>
JQuery Part
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>

It is not recommended to bind both click and doubleclick events to the same element, but if you must do so, this previously accepted answer provides a perfect solution by using a counter to track # of clicks: Jquery bind double click and single click separately

Onsen UI Navigator prevent double click

I have an on-list with items that I allow users to click on. Clicking on an item takes the user to a details page. If you click fast enough it's possible that two click events get fired taking the user to one details page, then another. Is there a way to prevent this? For example can you tell the navigator to not to push another page until the navigation is complete?
Here is my code called after the list has been populated, assigning the click event:
$( '#myList .item', this ).on( 'click', function() {
navi.pushPage( "details.html" ) );
});

To disable this behaviour you can currently pass {cancelIfRunning: true} as a second argument to navi.pushPage. We are planning on making this the default behaviour soon, which is why it's an undocumented setting, but until then you can just call it explicitly.
navi.pushPage('details.html', {cancelIfRunning: true});
As Fran Dios mentioned - there was an issue with this setting, but it should already be fixed in beta 6.
So as long as you are using OnsenUI beta 6 or higher you should have no problems with this setting turned on. Otherwise you can use Zakaria Acharki's solution.

Try to prevent the double click by adding preventDefault() in dbclick event attached to the list items :
$( '#myList .item', this ).on( 'dbclick', function(e) {
e.preventDefault();
});
Or you could disable the list items for a while after click to prevent the fast double click on different items :
//Example of disabling list for 1 second after click
$( '#myList .item', this ).on( 'click', function(e) {
e.preventDefault();
navi.pushPage( "details.html" ) );
$('#myList .item').prop('disabled', true);
setTimeout(function(){
$( '#myList .item').prop('disabled', false);
}, 1000);
});
Hope this helps.

Disable javascript in a element

I have an element with a a script for a mouseover to show an image. I can't change the HTML, so is it possible to disable the javascript in the link, but still keep the link for the href intact? I cant use the id of the a element since it isn't unique.
HTML:
<div class="container">
<a id="a211094" onmouseout="etim();" onmouseover="stim('/imgs/7c24b548-4f4c-418e-ad4f-53c73cf52ace/250/250',event,this.id);" href="/products/Computers/Desktops/Acer/Acer-Aspire-TC-705W-Towermodel-1-x-Core-i3-41?prodid=211094"><img src="" alt="">
</a>
</div>

if you want to make all ancher tag or you can give class for those anchor tags on which you want to perform this and instead of $( "a" ) write $( ".myClass" )
$( "a" ).each(function( index ) {
$( this ).removeAttr("onmouseout");
$( this ).removeAttr("onmouseover");
});
use can use attr("disabled", "disable"); to disable it

Overwriting the JavaScript:
document.getElementById("a211094").onmouseover = null
document.getElementById("a211094").onmouseout = null

document.getElementById("a211094").removeAttribute("onmouseout");
document.getElementById("a211094").removeAttribute("onmouseover");

If you can consistently access and control the containing element you could try a slightly left-field approach using an onmouseover event on the container.
There's a function called setCapture() which you can call during a mouse event to "capture" all mouse events of that kind for the element it's called against, until a mouseup event or releaseCapture() is called. So you could do something like the following:
jQuery(document).ready(function() {
$container = jQuery("#<yourcontainerid>");
$container.on("mouseover", function(e) {
if (e.target.setCapture) e.target.setCapture(true);
});
$container.on("mouseout", function() {
document.releaseCapture();
});
});
The (true) argument is important (I think, without testing) as it prevents any descendent events firing, which is what you want here.
The mouseout function will then release the capture when it leaves the area of the container.
Will this work? can't say for sure, I haven't tested it in your exact case, but in theory it should!
UPDATE: you can use ".container" rather than "#yourcontainerid" in the JQuery if you so wish to enable this for everything of class container.

How to catch all the links, read their attributes and prevent them from executing?

I want to catch all the .click() events that occurs on links on my page. Also, I want to read attributes of a link currently clicked. As far I have this, but there is a problem with it:
$("a").click(function (e) {
e.preventDefault();
$("#myPage").load("/ #myPage");
});
First of all, this code works only one out of two times - first time I click on a link, this code doesn't work, second click, this code works, third click, doesn't, etc. Why is that? Also, how can I read attributes of a link? I need to read src and class attributes.
Edit: What I need to do, is to catch whenever someone clicks on a link, stop that from happening, read href and class attributes of a link, and then proceed with loading the page (but not reloading, just replacing #myPage)
Edit2: Okay, so now the only problem is, why is it working one out of two times for me? When I load the page, then click a link, jquery works fine, but after second click, it is not hitting my $("a").click() event!
Solution: I fixed my problem by replacing .click() with .live() - now works every time. ;)

first part: How can I prevent link click:
just return false from your click event
$("a").click(function(e) { return false; });
Second part: how can I read attribute of a link
$("a").click(function(){
var href= $(this).attr('href');
alert(href);
return false;
});
see this fiddle

$("a").on('click', function(e) {
// stop click event
e.preventDefault();
// get href attribute of currently clicked item
var hrefAttr = $(this).attr('href');
// get class attribute
var classAttr = $(this).attr('class');
// do loading here
});

According to http://api.jquery.com/click/ the click() handler is potentially fired twice. Once for mousedown and once for mouseup. Perhaps you can utilize $.on('mouseup', function(e) { }); instead?
For attributes you can use:
$('a').attr('src');
In summary:
$("a").on('mouseup', function (e) {
e.preventDefault();
var src = $(this).attr('src');
$("#myPage").load("/#myPage");
});

jquery - using event.stopPropagation()

When the document is ready, I'm fetching some datas from the server through post request and I'm filling it in the HTML as tags by append. When you click that tag, a comment textarea will be displayed. When you click in the document section, the textarea will be closed. The problem here is I can't enter the text in the textarea, when I click inside, it is hiding. I tried using event.stopPropagation() but no use.
Here is my jquery code:
$.post("/person/keywords/get/", function(data){
for(i=0; i<data.length; i++)
{
count = count + 1;
$(".keywords-set").append('<div class="keyword-item"><span class="keyword" id="keyword-'+count+'">'+data[i]+'</span><textarea class="comment" id="comment-'+count+'"></textarea></div>');
}
});
$(".keywords-set").on('click', "[id^=keyword]", function(event) {
event.preventDefault();
i = $(this).attr("id");
i = i.split('-').pop();
$("#comment-"+i).show();
return false;
});
$(".comment").click(function(event) {
event.stopPropagation();
});
$(document).click(function() {
$(".comment").hide();
});
For complete HTML and javascript code, please check here: https://gist.github.com/3024186
It is working in jsfiddle
but not in my localhost. Could you tell the reason, why is it so?
Thanks!
UPDATE
I've also tried this
$(".keywords_set").on('click', ".comment", function(event) {
event.stopPropagation();
});
event.stopPropagation() is not working for HTML elements updated through ajax. But is working for normal(already given) elements.

When doing this:
$(".keywords_set").on('click', ".comment", function(event) {
You must understand that you're catching the event in the element ".keywords_set", and there you will be checking if it bubbled up through ".comment"
This means that any other "click" events set between ".keywords_set" and ".comment" will also activate.
doing stop propagation or returning false will only take affect from the bubbling of ".keywords_set" to the document.
You can do this:
$(document).click(function() {
if($(".comment:hover").length==0){
$(".comment").hide();
}
});
Edit: reply to: "Hey, that code works, I don't know how you are doing it by mentioning .comment.length could you be more descriptive about that?"
When you do any jquery selector, an array is returned. so if you do $(".comment") all html nodes with the class ".comment" will be returned to you in a list [obj1, obj2, ..., objn]
When you do $(".comment:hover") you are asking jquery to select you any element with the class "comment" which also have the mouse currently on top of it. Meaning if the length of the list returned by $(".comment:hover") is bigger than zero, then you caught a bubble from a click in a ".comment".
Although either returning false or stoping propagation should also work. (dunno why in your case it is not working, although i didn't look much at the full code)
Edit 2:
i was lazy to read the full code. but when you are setting the click event for the comment, the comment doesn't exist yet. so the new comment you are adding will not be be caught by your click handler. add it inside the ajax callback and it will work :)
Edit 3: one more thing:
you are not getting side effects because the click even you are re-defining only has the the stop propagation, but you should add the stop propagation before returning false in the
$(".keywords_set").on('click', ".comment", function(event) {
because in practice all other comments you have will be proccessing N times the click event that you are adding to be processed multiple times

Since post method is a asynchronous. You are binding $(".comment") before it exist.
moving
$(".comment").click(function(event) {
event.stopPropagation();
});
after
$(".keywords-set").append('<div class="keyword-item"><span class="keyword" id="keyword-'+count+'">'+data[i]+'</span><textarea class="comment" id="comment-'+count+'"></textarea></div>');
should work.