I need the location when I first click on the screen.I did this. But i need more.
The mousemove event will also run when the mousedown event runs. mousemove event will not work when mouseup event runs
$("#canvas").mousedown(function (e) {
console.log("First: down position: " + e.pageX + "---" + e.pageY);
canvasMove("canvas");
});
$("#canvas").mouseup(function (e) {
console.log("Last: up position: " + e.pageX + "---" + e.pageY);
});
function canvasMove(id) {
$(id).mousemove(function (e) {
console.log("move position: " + e.pageX + "---" + e.pageY);
});
}
So how do I remove the mousemove event in the mouseup event?
$("#canvas").off('mousemove')
If you have something else listening to the mouse you can attach your handler with a namespaced event like
$("#canvas").on('mousemove.loggingPosition')
and then remove it
$("#canvas").off('mousemove.loggingPosition')
You can do something like this using on and off methods:
function canvasMove(id) {
$(id).on("mouseup",function (e) {
$( this ).off("mousemove");
console.log("move position: " + e.pageX + "---" + e.pageY);
});
}
For more info visit here
Related
In my console, my following script starts logging not only upon clicking your mouse wheel but also continues after you stop holding the mouse wheel button.
var mPosX,
mPosY;
$(document).on('mousedown', function (e) {
"use strict";
if( e.which === 2 ) {
e.preventDefault();
mPosX = event.pageX;
mPosY = event.pageX;
$(document).mousemove(function(event){
var CmPosX = event.pageX,
CmPosY = event.pageX;
console.log('Original X: ' + mPosX + ', New X: ' + CmPosX + ' | Original Y: ' + mPosY + ', New Y: ' + CmPosY);
});
}
});
How can I get my script to only log whilst the mouse wheel is held down and stop when you release?
You'd store something in mousedown and mouseup that you can access in mousemove
$(document).on({
mousedown: function(e) {
e.preventDefault();
if (e.which === 2)
$(window).data('isDown', true).data('mPosX', e.pageX).data('mPosY', e.pageY);
},
mouseup: function(e) {
e.preventDefault();
if (e.which === 2)
$(window).data('isDown', false);
},
mousemove: function(e) {
if ($(window).data('isDown')) {
var CmPosX = e.pageX,
CmPosY = e.pageY,
mPosX = $(window).data('mPosX'),
mPosY = $(window).data('mPosY');
console.log('Original X: ' + mPosX +
', New X: ' + CmPosX +
' | Original Y: ' + mPosY +
', New Y: ' + CmPosY);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hold down mousewheel and move ...</p>
Is there any Jquery or any other way to display the title of the elements on giving focus just as the title displayed on hovering???
I have found this jquery but its not working.....Can anyone help please... Thanks in Advance!!!!!!!!!!
$(function () {
var xOffset = 20;
var yOffset = 30;
$('input').focus(function (e) {
this.t = this.title;
this.title = "";
$("body").append("<span id='tooltip'>" + this.t + "</span>");
$("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
});
$('input').blur(function (e) {
this.title = this.t;
$("#tooltip").remove();
$("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
});
});
EL:focus:after { content: attr(title); }
Should work. Look ma, no JS!
You just need to position the pseudo ::after element.
Mind this only works if the “pseudo parent” allows for a pseudo element.
focus event has no x and y position. You need to use the element's offset
http://api.jquery.com/offset/
Use JQuery UI Tooltip. It handles bubbling mouseover, mouseleave, focusin, focusout events on document by default. You just need to prevent mouse events propagation.
$(document).tooltip();
// prevent mouse event, handle focus events only
$('input').on('mouseover mouseleave', function(e) { e.stopPropagation(); });
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css" rel="stylesheet"/>
<input title="tooltip" type="text" />
http://jsfiddle.net/TnbYm/
I'm trying to get my right click menu to only show on children of #canvas. I also want to have it remove when a child is not clicked, but one of the problems are because document is being called as the container document closes it before the action is called.
If anyone can help me with this it'll be greatly appreciated.
if ( $("#tm").prop('checked') === true ) {
// Trigger action when the contexmenu is about to be shown
$("#canvas").find("*").bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
$("#custom-menu").hide(100);
// Show contextmenu
if ($("#showcustom-menu").show() === true) {
$("#custom-menu").hide(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
} else {
$("#custom-menu").show(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
}
});
// If the document is clicked somewhere
$(document).bind("mousedown", function () {
$("#custom-menu").hide(100);
});
} else {
$(document).unbind("contextmenu");
}
$("#tm").on('change', function() {
if ( $(this).prop('checked') === true ) {
// Trigger action when the contexmenu is about to be shown
$("#canvas").find("*").bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
$("#custom-menu").hide(100);
// Show contextmenu
if ($("#custom-menu").show() === true) {
$("#custom-menu").hide(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
} else {
$("#custom-menu").show(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
}
});
// If the document is clicked somewhere
$(document).bind("mousedown", function () {
$("#custom-menu").hide(100);
});
} else {
$(document).unbind("contextmenu");
}
});
// Menu's button actions
$("#custom-menu > button").click(function() {
alert($(this).text() + "was clicked");
});
$("#custom-menu > button#duplicate").click(function() {
// $('#canvas').append($(this).clone());
$("#custom-menu").hide(100);
});
$("#custom-menu > button#remove").click(function() {
// $(this).remove();
$("#custom-menu").hide(100);
});
$("#custom-menu").find("button#deselect, button#close").click(function() {
$("#custom-menu").hide(100);
});
You can use CSS selectors for that:
$(document).on('contextmenu', function (e) {
if (e.target.matches('#canvas *'))
alert('Contexted!');
else
alert('Not contexted!');
});
Element.matches
Fiddle
Hi i have updated the jsfiddle provided by you please go through that..
its working fine and you can add code into the click method according to your need.
Link for jsfiddle:- http://jsfiddle.net/TnbYm/14/
I have a text that when I long press the mouse button (700 ms), I will activate an text editor over that text. During this time (when the mouse is pressed) I have to check if the mouse position has moved. The problem is, that I only have one event, mouse down pressed event.
How do I found out if the mouse has been moved?
I have tried to take a new event but I am a beginner to jquery so I couldn't achieve what I wanted to.
this is the function where i get the event.
onTaskItemMouseDown: function (event) {
// We only check the left click
if (event.button !== 0) { return true; }
var that = this,
initialX = event.pageX,
initialY = event.pageY;
// Set timeout
console.log("x=" + initialX);
console.log("y=" + initialY);
this.pressTimer = window.setTimeout(function () {
clearTimeout(that.pressTimer);
that.pressTimer = 0;
that.onEditTask(event, that.$(event.currentTarget).closest(".task").find(".dropdown-container").data("task-id"));
}, MindomoUtils.longClickDuration);
return true;
},
You probably are looking for mousemove event.
I can see you already using jQuery so here is an example for you.
HTML for output
<ul class="output"></ul>
jQuery
$(document).on('mousedown', onMouseDown)
$(document).on('mousemove', onMouseMove)
$(document).on('mouseup', onMouseUp)
var mouseIsDown = false
function onMouseDown(event) {
// set boolean true
mouseIsDown = true
$('.output').append($('<li>').text('Mouse down - x: ' + event.pageX + ' y: ' + event.pageY))
}
function onMouseMove(event) {
if(mouseIsDown) {
$('.output').append($('<li>').text('Mouse moving - x: ' + event.pageX + ' y: ' + event.pageY))
}
}
function onMouseUp(event) {
// set boolean false again
mouseIsDown = false
$('.output').append($('<li>').text('Mouse up - x: ' + event.pageX + ' y: ' + event.pageY))
}
Here you can play with it yourself.
I'm trying to have a selection wheel appear when the user holds down the Shift key.
The wheel should be centred on the mouse's position.
However when I test this, pageX and clientX are both undefined on the event object.
Is it possible to get the mouse coordinates on a keyboard event?
No, simply track mousemove events and continuously save the current position in case you get a keyboard event.
Cache mouse position in a global variable in every mousemove event and use it when a key event fires:
var mousePosition = {x:0, y:0};
$(document).bind('mousemove',function(mouseMoveEvent){
mousePosition.x = mouseMoveEvent.pageX;
mousePosition.y = mouseMoveEvent.pageY;
});
$(document).bind('keyup', function(keyUpEvent){
$('body').append($('<p/>').text('x:' + mousePosition.x + ' * y: ' + mousePosition.y));
});
JSBIN: http://jsbin.com/uxecuj/4
JavaScript without jQuery:
var mousePosition = {x:0, y:0};
document.addEventListener('mousemove', function(mouseMoveEvent){
mousePosition.x = mouseMoveEvent.pageX;
mousePosition.y = mouseMoveEvent.pageY;
}, false);
document.addEventListener('keyup', function(keyUpEvent){
var divLog = document.querySelector('#log'),
log = 'x:' + mousePosition.x + ' * y: ' + mousePosition.y,
p = document.createElement('p').innerHTM = log;
divLog.appendChild(p);
}, false);
Here's the POJS equivalent of other answers that is cross browser back to IE 6 (and probably IE 5 but I don't have it to test any more). No global variables even:
function addEvent(el, evt, fn) {
if (el.addEventListener) {
el.addEventListener(evt, fn, false);
} else if (el.attachEvent) {
el.attachEvent('on' + evt, fn);
}
}
(function () {
var x, y;
window.onload = function() {
addEvent(document.body, 'mousemove', function(e) {
// Support IE event model
e = e || window.event;
x = e.pageX || e.clientX;
y = e.pageY || e.clientY;
});
// Show coords, assume element with id "d0" exists
addEvent(document.body, 'keypress', function() {
document.getElementById('d0').innerHTML = x + ',' + y;
});
}
}());
But there are bigger issues. Key events are only dispatched if an element that can receive keyboard input is focused (input, textarea, and so on). Also, if the user scrolls the screen without moving the mouse, the coordinates will probably be wrong.
An alternative solution is to use CSS to replace the cursor with a custom animation.
If you're using jQuery, you can do the following (assuming you have an image with id="wheelImage" and whose position is set to absolute), write the following inside your keydown event. Here we use the global properties pageX and pageY that are passed to any handler. You can also use jQuery's shiftKey property to check if the shift key has been pressed.
$().keydown(function(e) {
if (e.shiftKey) {
e.preventDefault();
$('#wheelImage').css('left',e.pageX ).css('top', e.pageY);
}
});
Cache the mouse position.
var x = 0, y = 0;
document.addEventListener('mousemove', function(e){
x = e.pageX
y = e.pageY;
}, false);
document.addEventListener('keyup', function(e){
console.log(x + ' ' + y);
}, false);
Or with JS Ninja Library.
var x = 0, y = 0;
$(document).mousemove(function(e){
x = e.pageX
y = e.pageY;
});
$(document).keypressed(function() {
console.log(x + ' ' + y);
});