dispatch click event not working with ctrl key - javascript

I want to dispatch a ctrl + click on an option element when user mouse down on that option, This is what I write that is not working:
$(function () {
$('body').on('mousedown', 'select[multiple] option', function (e) {
e.preventDefault();
e.stopPropagation();
this.dispatchEvent(new MouseEvent("click",
{
ctrlKey: true,
}));
$(this).prop('selected', !$(this).prop('selected'));
});
});
How to do this using javascript or jQuery so that it works?

Related

jQuery click event trigger $.confirm stacking the event

I want a button to submit a form when is clicked or the enter key is pressed on focus, but before I want to display a confirm alert displaying some information to the user using jquery-confirm, when he accepts the modal then the target form must submit.
For some reason when I confirm the first time is OK, but when I do a second time looks like the $.confirm is stacking, then is displayed two times, after confirm if I click again it's displaying 3 times... Why this is happening?
I'm using data attributes to select the element plus form target, there is a fiddle with my code:
https://jsfiddle.net/z3mn21dz/7/
Note: I don't want a walk around, I know there's a lot of possible alternatives but I want to know what's wrong.
HTML
<button data-role="confirm" data-target="target">
Submit
</button>
<h1>Form to submit</h1>
<form action="" id="target"><input type="text"></form>
JS/jQuery
$(document).ready(function($){
$('[data-role="confirm"]').on('keyup click', function (e) {
e.preventDefault();
var target = $(this).data('target');
if(e.keyCode == 13 || e.type == "click")
{
$(this).confirm({
title: 'Confirm!',
content: 'Simple confirm!',
buttons: {
confirm: function () {
$.alert('Confirmed!');
},
cancel: function () {
$.alert('Canceled!');
},
somethingElse: {
text: 'Something else',
btnClass: 'btn-blue',
keys: ['enter', 'shift'],
action: function(){
$.alert('Something else?');
}
}
}
});
}
})
});
In your fiddle updated your entire JS code like below and it seems working properly. P.S. Line number line 9 on the script $(this).confirm({ was changed to $.confirm({.
$(document).ready(function(){
$('[data-role="confirm"]').on('keyup click', function (e) {
e.preventDefault();
var target = $(this).data('target');
if(e.keyCode == 13 || e.type == "click")
{
$.confirm({
icon: 'fa fa-exclamation-triangle',
confirmButton: 'bestätigen',
confirmButtonClass: 'btn btn-danger',
cancelButton: 'abbrechen',
confirm: function(ee){
$( "#"+target ).submit();
}
});
}
})
});
UPDATE
The Javascript part is updated as
$(document).ready(function($){
$('[data-role="confirm"]').on('keyup click', function (e) {
e.preventDefault();
var target = $(this).data('target');
if(e.keyCode == 13 || e.type == "click")
{
$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
buttons: {
confirm: function () {
$.alert('Confirmed! Target: '+target);
},
cancel: function () {
$.alert('Canceled!');
},
somethingElse: {
text: 'Something else',
btnClass: 'btn-blue',
keys: ['enter', 'shift'],
action: function(){
$.alert('Something else?');
}
}
}
});
}
})
});
The reason for your stack was that you were using $(this).confirm instead of $.confirm. i.e., the confirm function was associated with JQuery, and since you used this it was not getting bound at first instance. Secondly, the syntax of confirm needs buttons to take the necessary actions which too was missing before. Hope this clarifies.
$(document).ready(function($){
$('[data-role="confirm"]').on('keyup click', function (e) {
e.preventDefault();
var target = $(this).data('target');
if(e.keyCode == 13 || e.type == "click")
{
$(this).confirm({
title: 'Confirm!',
content: 'Simple confirm!',
buttons: {
confirm: function (e) {
$.alert('Confirmed! Target: '+target);
$('.jconfirm').remove();
},
cancel: function () {
$.alert('Canceled!');
},
somethingElse: {
text: 'Something else',
btnClass: 'btn-blue',
keys: ['enter', 'shift'],
action: function(){
$.alert('Something else?');
}
}
}
});
}
})
});
The reason is, once you click 'confirm' button, a new element 'jconfirm' is created,you can see the 'Elements' tab, so you need to remove it everytime.
This issue is happening because your button is outside the form element, it might cause the issue
Take the button within your form element and include type="sumbit" in the button.
Look the following function, customize as you needed.
function confirmDel(e){
e.preventDefault();
$('#dialog-confirm').dialog({
resizable:false,
height:"auto",
width:300,
modal:true,
buttons:{
"Confirm Delete":function(){
e.target.submit();
$(this).dialog("close");
},Cancel:function(e){
e.preventDefault();
$(this).dialog("close");
}
}
});
}
}
Call this function in the onsubmit event of your form. It will solve the issue.
You don't need to re-define the confirm object in every click, only once. In order to prevent the sticky confirm dialog behaviour you can add a control variable, so the confirm definition only happens once. Following your code:
$('[data-role="confirm"]').on('keyup click', function (e) {
if ($(this).data.defined) {return;}
$(this).data.defined = true;
//...
There are other issues you might want to fix, as the keyup event should be attached to the input field rather than the button (I'm guessing). This workaround is focused on the confirm behaviour only.

jQuery click to toggle

I have this code in my script:
$(document).ready(function() {
$('*').not('div#user').click(function() {
$('div#userSettings').hide();
});
$('div#user').click(function() {
$('div#userSettings').toggle();
$('div#profileSettings').toggleClass('rotate');
});
});
I need the div#userSettings to be hidden whenever anything but it's button or itself is clicked, and I want it to appear only when I click on the div#user.
the toggleclass does still work in this, just that the div#userSettings does not appear at all
You can stop the event propagation
$(document).ready(function () {
$(document).click(function (e) {
$('#userSettings').hide();
})
$('#user').click(function (e) {
e.stopPropagation();
$('#userSettings').toggle();
$('#profileSettings').toggleClass('rotate');
});
$('#userSettings').click(function (e) {
e.stopPropagation();
});
});
Demo: Fiddle

how to target event for "shift keydown & click" on a div?

I want to control events when hovering a <div> element.
I have my code pretty much working, but I have 2 remaining problems!
When I first run the code in my JSFiddle, I need to click on the body of the document first to get the keydown to be recognised. If I run the code and hover right away and press shift nothing happens. I have it running on doc ready,so not sure why I need to click first? Anyway to get this to work right way without needing to click?
I trace out in the console the console.log('click and press'); This is getting fired each time I press shift and is not looking for a click - why is this getting fired when pressing shift when I call it within a function that says $(document).on('keydown click', function (e) {
DEMO
My JS code is as follows
$(document).ready(function () {
$(".target").hover(function () {
$(document).on('keydown click', function (e) {
if (e.shiftKey) {
// code to go here for click
console.log('click and press');
}
});
$(document).on('keydown', function (e) {
if (e.shiftKey) {
// change cursor to ne-resize
$('.target').css('cursor', 'ne-resize', 'important');
}
});
$(document).on('keyup', function (e) {
// change cursor to sw-resize
$('.target').css('cursor', 'sw-resize', 'important');
});
});
});
Thanks
Your event binding is incorrect. you can use:
Demo: http://jsfiddle.net/g9ea8/8/
Code:
$(document).ready(function () {
var hovering = false;
$(".target").hover(function () {
hovering = true;
}, function() {
hovering = false;
});
$(document).on('click', function (e) {
if (hovering && e.shiftKey) {
// code to go here for click
console.log('hovering+shift+click');
}
});
$(document).on('keydown', function (e) {
if (hovering && e.shiftKey) {
// change cursor to ne-resize
$('.target').css('cursor', 'ne-resize', 'important');
console.log('hovering+shift');
}
});
$(document).on('keyup', function (e) {
// change cursor to sw-resize
if(hovering) {
$('.target').css('cursor', 'sw-resize', 'important');
console.log('hovering+keyup');
}
});
});
The reason why you need to click first on the fiddle demo is because the frame doesn't have focus, normally this should work fine.
You shouldn't be attaching a keydown listener, you only need a to attach click, otherwise keydown will fire the event regardless of a click occurring.
Also, currently you're attaching 3 handlers every time you hover over .target, see #techfoobar's answer for a cleaner solution.

Focus Which not triggered by click

How to trigger an action when focusing an input but the focus event not come from click?
$('#input').focus(function(){
if(not come from click)
{
alert('Holla!');
}
});
To tell between "focus" events that come from keyboard and those that come from mouse, you can track the mouse events.
First, to understand the sequence of events that happen when you click an input, or Tab into it, look at the following jsfiddle: http://jsfiddle.net/orlenko/fyFkk/
In it, we'll log mousedown, mouseup, click, focus, and blur events.\
<input type="text" id="zero"/>
<input type="text" id="one"/>
JavaScript:
$(function() {
var one = $('#one');
one.mousedown(function() {
console.log('mousedown');
});
one.mouseup(function() {
console.log('mouseup');
});
one.click(function() {
console.log('click');
});
one.focus(function() {
console.log('focus');
});
one.blur(function() {
console.log('blur');
});
});
If we simply click on the input, and then on another control, we'll get the following:
mousedown
focus
mouseup
click
blur
But if we tab into and out of the input, we'll see in the console:
focus
blur
So, if we keep track of mousedown and blur events, we can tell between a keyboard-based focus and a mouse-based one. For example:
$(function() {
var one = $('#one');
one.mousedown(function() {
console.log('mousedown');
$(this).data('mousedown', true);
});
one.mouseup(function() {
console.log('mouseup');
});
one.click(function() {
console.log('click');
});
one.focus(function() {
if ($(this).data('mousedown')) {
console.log('You clicked it!');
} else {
console.log('You tabbed it!');
}
});
one.blur(function() {
console.log('blur');
$(this).data('mousedown', false);
});
});
A fiddle with this example: http://jsfiddle.net/orlenko/cwRAw/
Use keyup
$('#input').keyup(function(){
alert('Called only when the focus is on element through keypress');
});
function ren(){
alert('Holla!');
}
$('input').focus(ren);
$('input').mousedown(function(){
$('input').off('focus',ren);
});
$('input').mouseup(function(){
$('input').on('focus',ren);
});
Don't check in focus function instead remove the focus function when making a click
Demonstration

How to use preventDefault in contenteditable divs?

This is an example on CodePen.
Here's the code anyway:
HTML:
<div contenteditable="true" id="mydiv"></div>
jQuery:
$(function () {
$("#mydiv").keydown(function (evt) {
if (evt.which == 13) {
evt.preventDefault();
alert('event fired');
}
});
});
Why won't the evt.preventDefault() method work?
The preventDefault call just keeps the default event handler from running. If you want to skip any code after the point where you have evt.preventDefault(), put a return false after it.
$(function () {
$("#mydiv").keydown(function (evt) {
if (evt.which == 13) {
return false; // <-- now event doesn't bubble up and alert doesn't run
alert('event fired');
}
});
});
Also, as mentioned by squint, you can use stopPropagation and preventDefault to achieve the same effect.

Categories

Resources