Mouse click doesn't work, mousemove does - javascript

I try to trigger an event on mouse click but my event never start. First I I didn't select the good area but the mouse event "mousemove" trigger my event. I don't understand how it is possible...
Does someone has an explaination or a solution to this problem?
d3.select("#chart").on("mousemove", function(){console.log("this");});
d3.select("#chart").on("click", function(){console.log("that");});
I can see "this" but not "that".
I've found this question but that doesn't solve my problem...

You have mistaken the spelling of click, change
d3.select("#chart").on("clic", function(){console.log("that");});
to
d3.select("#chart").on("click", function(){console.log("that");});

You must use event 'click' ... not 'clic'

Show bigger part of your code. I`ve tried here to bind click event and everything works fine: D3.js test click
d3.select('#one').on('click', function(){console.log('Clicked!')})

Related

Why do I get an entry into the dblclick handler when double click was not issued?

I have JSFiddle with a resizable box. When double-clicking anywhere on the document, the box color toggles between beige and red.
The problem is that sometimes when releasing the left mouse button after resizing the box, a dblclick event is generated and the box turns red. And sometimes you can release the mouse button without changing the box color, but then if you click just once in the box it generates the dblclick and changes the box color.
Usually, everything works fine: I resize and there's no dblclick entry. I have to try maybe 20 times to get a false dblclick event.
I'm using Chrome.
I could partially fix this particular instance of the problem by adding code to the dblclick handler to ignore the entry if a resize is in progress. That still doesn't fix the dblclick entry, though, that happens (very rarely) when I resize , get no dblclick, but then get a dblclik when I click just once in the box.
But rather than just get the JSFiddle here to work, what I'm looking for here is the reason this dblclick is generated. Am I using the dblclick event incorrectly? Is there a known bug with this event and perhaps a better solution? Is there some kind of switch bounce going on with the mouse button?
$(function() {
$("#box").resizable();
$(document).dblclick(function(e){
console.log("double-clicked on ", e.target);
$("#box").toggleClass("red");
});
});
It can be related to your hardware, I guess it is also affected by your system's "double click delay" setting.
Using Firefox, if I repeatedly click&drag with small, close motions, I do trigger the dblclick event, and I would say it is normal behaviour. I don't see dblclicks poping out of nowhere with 5 secs spaced clicks, though.
To help you track a possible cause for your bug, try to also log the mousedown and mouseup events :
$(document).mousedown(function(e){
console.log(" mousedown on ", e.target);
});
$(document).mouseup(function(e){
console.log(" mouseup on ", e.target);
});
fiddle
Try this code:
$('#test').dblclick(function(e){
if(!$(e.target).is('.ui-resizable-handle'))
$(this).toggleClass('selected');
}).resizable();
fiddle
I tested in chrome too and it works fine for me... It does not trigger if you click too close to a dbclick, like the event does not fire as it dosent recognize the dbclick as you clicking too fast. That's the best answer I can give. I have some problems with my mouse sometimes, if I dont click too hard it doesn't register a mouseclick... but my mouse is pretty old, not sure if your mouse works perfectly :P
You need to stop click handler for resize handles using stoppropagation.
Updated the jsfiddle and tested.
$(function() {
$("#box").resizable();
$(".ui-resizable-handle").dblclick(function(ev){
ev.stopPropagation();
})
$(document).dblclick(function(e){
console.log("double-clicked on ", e.target);
$("#box").toggleClass("red");
});
});

jQuery's 'click' function when user highlights text?

I'm using jQuery's click function to check the formatting of highlighted text, however the function isn't always called.
If you highlight part of a line it will work as expected, however if you highlight the entire line it simple doesn't call at all.
Here is a JSFiddle for you to try it out: http://jsfiddle.net/ZMYRH/
Is there any chance I'm using this function incorrectly? Or is there a workaround to what I want to achieve?
The issue is because a click event is only fired if the mousedown and mouseup event occur on the same element.
In your case the mouseup event would be more appropriate as it will allow the user to drag a selection across elements.
Updated fiddle

Single user action firing two events - second event doesn't trigger

I’m running into this issue where a single action by the user is supposed to trigger two events but it only triggers the first one.
The scenario:
A user enters some text into a special field that modifies the layout on focusout , after entering the text, without leaving the field, they click a button.
What’s happening?
I have a focusout event on a text box and click event on a button. What I see is the focusout event gets fired but the click event never does.
I’ve encapsulated this in a jsfiddle:
http://jsfiddle.net/fCz6X/13/
$('#theText').focusout(function (){
$("#focusevent").text("Focusevent");
console.log("focus");
});
$('#theButton').click(function (){
$("#clickevent").text("Clickevent");
console.log("click");
});
So if you click in the text field then click the button I’d expect both events to fire, but we only see the focus out event.
I put in a temporary fix for this by having the mousedown event fire the button instead of a click event (this fires before the focusout event) but that is causing some other behaviors and issues that I don’t want to see. Due to those I think optimal solution is finding a way to get the focusout and click events to both fire. Does anyone have thoughts on how to fix this problem?
Edit: After seeing initial responses I dug a little deeper, the issue here is that the focusout event is changing the page layout which very slightly pushes the location of the button down. The click event triggers after the focusout is done but since the button is no longer in the exact same location, nothing happens.
Here is an updated fiddle that shows my problem
http://jsfiddle.net/fCz6X/11/
It's because you're calling alert - the focusout event fires, but before the browser recognizes you've clicked the button, the alert box blocks it.
Change your event handler to console.log or something else that's non-obtrusive and you'll be ok.
It is the Alert that is blocking.
Some browser security prevents firing too many window.alert at the time.
When trying with other triggers, it looks. You may try console.log()
$('#theText').on("focusout",function (){
$("#theText").val($("#theText").val()+"flb");
});
$('#theButton').on("click",function (){
$("#theText").val($("#theText").val()+"but");
});
I believe this is because the focusout event fires first, executing the handler, and the alert then prevents the browser from recognizing the click.
Try again with console.log instead of alert - it's less invasive.
As Joe said, the blocking alert call is what is breaking the event. Using a non-blocking call you will see both events.
If you really need to perform an alert like this, though, you can defer calling 'alert' until later using setTimeout()
$('#theText').focusout(function (){
setTimeout(function() { // alert after all events have resolved
alert("focus left text box");
}, 0);
});
Edit: In your updated fiddle the reason the click event never fires is because no click event occurs. If you move the button out from under the mouse on mousedown, there is no followup mouseup which is what initiates the 'click' event.
You may need to reconsider other aspects of your design. Your solution of using 'mousedown' is the best you can achieve because it's the only event that actually occurs.

jQuery trigger mouseout event

Is it possible to trigger a mouseout event on a link element using jQuery ?
I.e. Something of the sort
$(linkEle).mouseout()
I want this to work on an iPad, which even though does not have any mouse cursor, does actually have the event...
Yes, jquery has a mouseout event handler - http://api.jquery.com/mouseout/
$('some_selector_here').mouseout(function() {
// Do some stuff
}
$('some_selector_here').trigger('mouseout');
You might be able to use:
.trigger('mouseleave');
In the form of:
$('#elementToTriggerMouseLeaveOn').trigger('mouseleave');
References:
trigger().
I don't know about the ipad, but it works as you posted. http://jsfiddle.net/tESUc/
$(linkEle).mouseout();
or
$(linkEle).trigger('mouseout');
or
$(linkEle).trigger($.Event('mouseout'));
Try with tap event
tap - triggered after a tapping an pnscreen element.
http://www.roccles.com/?p=134
$('.link').live('tap',function(event) {
//TODO
});
mouse hover state does not exist on touchscreens
Mouse over/out events do not work as required on ipad. Take a look at touchstart/touchmove and touchend events which are specially for touch devices.
Something like this http://jsfiddle.net/hTYKQ/ Will work in ipad but in this fashion:
1st click to the element triggers the mouseenter function.
2nd click triggers stuff.. if it has stuff... like a link (
http://jsfiddle.net/qxM33/1/ i screwed the <a> href but you get
the point.)
Click outside the element triggers the mouseleave function.
What this story teaches is: jquery mouse over and mouse out functions work much like click functions in ipad.

Form input loses focus on scroll bar click in IE

I hope someone can help me. I know this has been discussed here before but the example is prototype and foreign to me. I'm looking for a strict javascript or jquery solution. I have an example setup here. Click on the scrollbar in FF and you don't get an alert but click on it in IE and you do. Please help me, thanks!
After some searching I came up with this answer. From the best of my knowledge, you cannot actually cancel the blur event, nor can you call the focus event at the same time. This is what I don't get .. you can blur on focus but you cannot focus on blur .. Anyway my solution is use the setTimeout function to call the focus event 1ms after the focus was lost.
var o = this;
oTimeout = setTimeout(function(){
o.focus();
},1);
Using mouseenter and mouseleave events, I set a boolean to refer to on blur event
$("div#box").mouseenter(function(){
changeFocus(1);
}).mouseleave(function(){
changeFocus(0);
});
I've had the same problem and this works for what need it to do. Just force the focus back on the element.
$('#divWithScrollBar').scroll(
function () {
$('#elementThatLosesFocus').focus();
});
That event is somehow triggered after the element is blurred, but before the onblur event is kicked in. Haven't really looked in to it, but that's what seems to be going on.
The scroll does appear a bit slow, but it works.
IE owes me many hours of my life back.

Categories