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.
Related
)
I have a question about the KonvaJS.
I am trying to figure out how to catch the right click mouse event on a shape.
There are already some events for this kind of "event catching" but it seems to be that they are not for the shapes/groups.
So, what I've already tried:
group.addEventListener('contextmenu', function() {
alert("test");
});
group.on('contextmenu', function(){
alert("test");
});
group.on('contentContextmenu', function(){
alert("test");
});
All three of them are not working
The only thing what is working fine
stage.on('contentContextmenu', function(e) {
e.evt.preventDefault();
console.log(e);
});
Is there any other events present in the framework?
Maybe you can help me =)
Thank You
// do not show context menu on right click
stage.on('contextmenu', (e) => {
e.evt.preventDefault();
});
// do something else on right click
circle.on('click', (e) => {
if (e.evt.button === 2) {
alert('right click')
}
});
Demo: https://jsbin.com/junilaboqo/1/edit?js,output
I have a web app which hides the bottom toolbar while typing to stop it going on top of the keyboard.
$(document).ready( function() {
$("#open").focus( function() {
$('#bottom').hide();
});
$("#open").blur( function() {
$('#bottom').show();
check();
});
});
$('#open'); is an <input> box.
Instead of hiding, the lower bar stays. The text 'loading' also appears beneath (for some reason). This is especially strange as I can't find it in the DOM when inspecting on my computer.
Link: www.scriptr.net/webapp
Try listening to a different ready event for mobile. Something like this
document.addEventListener("deviceready",onReady,false);
function onReady() {
$("#open").focus( function() {
$('#bottom').hide();
});
$("#open").blur( function() {
$('#bottom').show();
check();
});
}
just put this code on deviceReady function, work for me
document.addEventListener('focusout', function(e) {window.scrollTo(0, 0)});
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
document.addEventListener('touchstart', function(e) {
if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
document.activeElement.blur();
}
}, false);
I want to add custom context menu with jQuery for the whole body of the page, except the textfields. How can I do that?
I have tried that code:
$('body:not(input)').bind('contextmenu', function(){
/*code*/
});
Check the srcElement before plugin executions. If it's not an input element, do trigger the contextmenu plugin:
$(document).on("contextmenu", function(e) {
if (!$(e.srcElement).is(":input")) { // if it's not an input element...
$(this).triggerTheContextMenuPlugin();
}
});
Use an event listener on the document and check if it was initiated by an input element.
$(document).on("contextmenu", function (e) {
if (e.target.tagName.toUpperCase() === "INPUT") {
console.log("context menu triggered");
}
});
Demo here
Inspired by Salman's solution.
You can stop the event propagation in all input elements, with the e.stopPropagation() function. In doing so, you keep the default behavior of the inputs elements:
$(function() {
$(document).on("contextmenu", function(e) {
alert("Context menu triggered, preventing default");
e.preventDefault();
});
$("input").on("contextmenu", function(e) {
e.stopPropagation();
});
});
JSFiddle Demo
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
I have a list which has a jquery handler for a mouse click. I need to place an image within the list, but need a mouse click on the image to perform a different function. I was thinking some sort of unbind on mouseover and bind on mouseout but can not get it to work. Is there an easier method?
The problem I am having is it performs the two clickable events when I click the image.
JS
$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
$(this).click(function () {
alert("This is a click on the list")
}
});
});
html
<li id="tab" runat="server">Keywords <a class="fake-link" onclick="alert("This is an image click")"><img id="icon" src="images/icon.gif" style="float: right; visibility:visible"/></a></li>
So any ideas how I can only have the alert from the image click? Thanks in advance!
$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
$(this).click(function (e) {
if($(e.target).attr('id')==='icon')){
//call that function which runs on image click
}
else {
alert("This is a click on the list")
}
}
});
});
Edit: As puppybeard suggested here is another way if you want to have different function to run for all images in the li's
$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
$(this).click(function (e) {
if($(e.target).is('img'))){
//call that function which runs on image click
}
else {
alert("This is a click on the list")
}
}
});
});
It's hard to do because of event bubbling.
Event namespaces and .on() .off() would help.
For example:
var items = $('#v-nav>ul>li');
var someFunctionToPerform = function() {
alert('Imma list click event');
}
items.on('click.someEventNameSpace', someFunctionToPerform);
items.find('img').on({
'mouseover': function() {
items.off('click.someEventNameSpace');
},
'mouseleave': function() {
items.on('click.someEventNameSpace', someFunctionToPerform);
},
'click': function() {
alert('Imma list image click event!');
}
});
This code will unbind click event for list items after mouseover event on image inside the list and bind them back after mouseleave event on image.
That's probably the hard way, but still it should work. Other answer could be buggy in IE 8- because of different dirrection of event bubbling.