How to use preventDefault in contenteditable divs? - javascript

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.

Related

event.stopPropagation() is not worknig?

I have implemented click event on window and on specific element. I want to stop window click event propagation on particular element click as mentioned below but it is not working. I am not sure what wrong I am doing here.
$('.dropdown-container').click(function(event){
event.stopPropagation()
var selectElement = '.dropdown-container > select';
if($(selectElement).hasClass('actionDD')){
$(selectElement+'.actionDD').toggleClass('special');
}
else if($(selectElement).hasClass('countryDD')) {
$(selectElement+'.countryDD').toggleClass('special');
}
$('.fa-chevron-down.importC, .fa-chevron-down.exportC ').removeClass('special');
});
$(window).click(function(event){
console.log('window event clicked');
$('.dropdown-container, .fa-chevron-down.importC, .fa-chevron-down.exportC').removeClass('special');
});
Apart from the typos, if your selects are not nested just do this
$('.dropdown-container').on("click", "select", function(e){
e.stopPropagation()
if($(this).is('.actionDD') || $(this).is('.countryDD')) {
$(this).toggleClass('special');
}
$('.fa-chevron-down.importC, .fa-chevron-down.exportC ').removeClass('special');
});
$(window).on("click", function(e){
console.log('window event clicked');
$('.dropdown-container, .fa-chevron-down.importC, .fa-chevron-down.exportC').removeClass('special');
});
Please post your HTML since this works:
$('.dropdown-container').on("click", "select", function(e) {
e.stopPropagation()
if ($(this).is('.actionDD') || $(this).is('.countryDD')) {
$(this).toggleClass('special');
}
});
$(window).on("click", function(e) {
console.log('window event clicked');
});
.special {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-container">
<select class="actionDD">
<option>Click</option>
</select>
</div>

Prevent newly created click event from running

Here's a simplified example of the problem I'm having. Say I have this HTML:
<div id="test">Hello</div>
I have the following event handler attached to this div:
$("#test").on("click", function() {
console.log("Clicked test!");
$(document).one("click", function() {
console.log("Clicked on document!");
});
});
Here's a jsFiddle of this example.
If I click on Hello, ideally I would only want "Clicked test!" to appear in my console, and for "Clicked on document!" to appear after I click a second time. However, both log messages appear, as the click event bubbles up to the document object and runs this new click event. Is there a way to prevent this from happening without using stopPropagation, which may have other unintended side effects?
My solution is kind of hacky, but it does work. If you set the document click handler asynchonously, the event doesn't bubble up:
$("#test").on("click", function(e) {
console.log("Clicked test!");
setTimeout(function(){
$(document).one("click", function() {
console.log("Clicked on document!");
});
}, 10);
return true;
});
See the modified fiddle: https://jsfiddle.net/voveson/qm5fw3ok/2/
Or using on and off with selectors:
$(document).on("click", "#test", add_doc_click)
function add_doc_click() {
console.log("Clicked test!");
$(document).on("click", function (e) {
console.log("Clicked on document!");
})
$(document).off("click", "#test", add_doc_click)
}
https://jsfiddle.net/y2q1gocu/
EDIT: to have test and clicked each time:
$(document).on("click", "#test", add_doc_click)
function add_doc_click() {
console.log("Clicked test!");
$(document).on("click", function (e) {
console.log("Clicked on document!");
})
$(document).on("click", "#test", function (e) {
console.log("Clicked test!");
})
$(document).off("click", "#test", add_doc_click)
}
https://jsfiddle.net/y2q1gocu/1/
Assuming nothing should happen on the third click, add these two lines at the end of the click handler:
$(this).off('click');
return false;
Fiddle
Incase you want to click Hello once and then remaining on document.
$( "div" ).one( "click", function() {
console.log("Clicked test!");
event.stopPropagation();
});
$(document).on("click", function() {
console.log("Clicked on document!");
});
https://jsfiddle.net/qm5fw3ok/3/
You can use a class that flags whether or not the element has been clicked on or not.
$("#test").on("click", function(e) {
console.log("Clicked test!");
if($(this).hasClass('clicked')){
$(document).one("click", function(e) {
console.log("Clicked on document!");
});
}else{
$(this).addClass('clicked');
}
});

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.

How to avoid and return an event in jquery when you specify a new event?

I need to overwrite the events but, the application has an option to return the original events to each element of the document. Any ideas?
For example:
<div class="mydiv">
</div>
$(document).delegate( '.mydiv', click', function () {
alert('This is the original event my event!');
});
$(document).delegate( '.mydiv', 'click', function() {
alert('Do this and ignore de previous...');
// For example: How to return the original event when mouseleave event will executed?
});
$(document).delegate( '.mydiv', 'mouseleave', function() {
// return the original event of mydiv
});
Use undelegate function before creating new click function
Docs http://api.jquery.com/undelegate/
try to check click event in functions
$(document).delegate( '.mydiv', click', function ()
{
if(clicked){
return;
}
alert('This is the original event my event!');
});
$(document).delegate( '.mydiv', 'click', function() {
if(!clicked){
return;
}
alert('Do this and ignore de previous...');
});

Categories

Resources