Click event is getting triggered on mouse down event. Is there any way to cancel the click event and just trigger the mouse down event?
<div onClick={this.onClick}
onMouseDown={this.onMouseDown}> </div>
I am using react 16.
What you could do is have separate nested div for different events:
<div onClick={this.onClick}>
<div onMouseDown={this.onMouseDown}> </div>
</div>
And then, can use stopPropagation() on the events like this:
onMouseDown: function(e) {
e.stopPropagation();
console.log('onMouseDown');
}
Click event occurs when mouseDown and mouseUp occurs on an event. So when you trigger a click event, first a mouseDown event is fired. You can put a function on onMouseUp event so that it gets triggered when the mouse button is released.
Related
There is the following code:
<div onkeydown="console.log('onKeyDown')">
<button onclick="console.log('onClick')">Test onClick</button>
</div>
If I tab to the button and press Enter I'll see 2 messages: 'onKeyDown' at first and 'onClick' at second. Why does 'onkeydown' event fire before 'onclick' event? I thought that 'onclick' event must bubble firstly.
Click is considered a "KeyPressed" event - keydown and keyup event completed - by JavaScript. Thus when you "begin" to click - by depressing the mouse button, for instance, the onkeydown event will trigger, before the click is released, at which point an onKeyUp event will be registered, and the two events taken together will also trigger an onKeyPressed event.
So browsers will register and process onKeyDown before waiting for the key to be released, at which point an onKeyUp event will be registered and processed.
See https://www.mutuallyhuman.com/blog/keydown-is-the-only-keyboard-event-we-need/ if this explanation is unclear.
I have a draggable div with a clickable tag within it:
<div id='myDiv'>
<a id='mylabel' onclick="alert('i am clicked')">some text</a>
</div>
$("#myDiv").draggable({
stop: function(e){
//want to cancel the click event on the nested a element
//e.preventDefault(); ??
//e.cancelBubble(); ??
}
});
When I stop dragging, the click event fires, which I don't want. I tried preventDefault and cancel on the stop drop event but the click event still fires. Any ideas anyone?
I figured it out. The trick is to attach a click event to the draggable div like so:
$("#myDiv").click(event.stopPropagation());
Because dragging the div also invokes a click event, which then propagates to the child a tag, the stop drag event is the wrong thing to stop. Removing click propagation is the way to go.
There is a rect on mousedown mouseup click event . but when I click the rect mouseup Event dosen`t trigger https://jsfiddle.net/f0vbc94s/
there is my code:
var rect=d3.select(".text").append("rect")
.attr("width",1000).attr("height",1000)
.style("fill","#00ff00");
rect.on("click",function(){
d3.event.preventDefault
d3.select(this).style("fill","#000000")
})
.on("mousedown",function(){
d3.select(this).style("fill","#ff0000")
}).on("mouseup",function(){
d3.event.preventDefault;
d3.select(this).style("fill","#00ff00")
})
Your click event is overwriting the mouseup event. When you click
and hold the mouse at down position, mousedown event fires and
changed the color. When you release the mouse, mouseup event fired,
changed the color and then click event fired immediately and changed
the color. So you couldn't recognise it.
If you comment the click event, you can see the mouseup event fired.
Try this,
var rect=d3.select(".text").append("rect")
.attr("width",1000).attr("height",1000)
.style("fill","#00ff00");
//rect.on("click",function(){
//d3.event.preventDefault
//d3.select(this).style("fill","#000000")
//})
rect.on("mousedown",function(){
d3.select(this).style("fill","#ff0000")
}).on("mouseup",function(){
d3.event.preventDefault;
d3.select(this).style("fill","#00ff00")
})
See this jsfiddle:
http://jsfiddle.net/CB87X/6/
Click and hold the button, drag off the button and release. As you can see, the mouseup event never fires if the mouse is not over the element when the mouse button is released. Thus, the styling in my example never changes back to its original. How do you fire the mouseup event if the mouse button is released when not over the clicked element?
Edit1: BTW I have looked at several solutions on this site, implemented them, and the mouseup event still did not fire.
The mouseup event is relative to where the pointer is and this is expected behaviour. If you want your button to style properly, bind the mouseleave event as well.
This should do the trick. If you left click on the button (.but) and drag off, you can mouseup anywhere on the page and still fire the click event. If you mouseleave the page 'body' and mouseup, the binded mouseleave event is unbinded.
$('.but').mousedown( function(e) {
if (e.which == 1) {
var $this = $(this);
$this.bind('mouseleave', function(){
$('body').one('mouseup', function() {
$this.click();
});
});
$this.mouseup(function() {
$(this).unbind('mouseleave');
});
}
});
Forked your exemple to provide a working example:
http://jsfiddle.net/67Rrs/2/
Once the button is mousedowned, an event is bound to the next mouseup, wherever it happens, that resets the style.
Just use $(document).on('mouseup dragend', somefunc);
I have a checkbox on my page. How do I stop it from receiving any event (e.g. touchstart) using jQuery ?
I mean nothing should happen when that checkbox is clicked.
To disable all JavaScript - Handlers on the element:
$('#checkbox').unbind();
And to prevent the standard-function of the checkbox, you could disable it
$('#checkbox').attr('disabled', true);
or directly in the Markup:
<input type="checkbox" disabled="disabled" />
See this: jQuery unbind()
$('#thecheckbox').unbind('click'); // removes all 'click' event handlers from the element
Use this, but you have to specify the events one by one:
$('.selectorToCheckbox').bind('click mouseover', function (e) {
e.preventDefault();
});
The available events are: blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.