jQuery получить позицию мыши в элементе
Я надеялся создать элемент управления, где пользователь может щелкнуть внутри div, затем перетащить мышь, а затем отпустить мышь, чтобы указать, как долго они хотят, чтобы что-то было. (Это для элемента управления календарем, поэтому пользователь будет указывать длину, во времени, определенного события)
похоже, что лучший способ сделать это-зарегистрировать событие "mousedown" на родительском div, которое, в свою очередь, регистрирует событие "mousemove" на div, пока не будет вызвано событие "mouseup". События" mousedown "и" mouseup "будут определять начало и конец диапазона времени, и, следуя событиям" mousemove", я могу динамически изменять размер диапазона, чтобы пользователь мог видеть, что они делают. Я основывал это на том, как события создаются в календаре google.
проблема в том, что событие jQuery, похоже, предоставляет только надежную информацию о координатах мыши по всей странице. Есть ли способ определить координаты ссылка на родительский элемент?
Edit:
вот картина того, что я пытаюсь сделать:
8 ответов
один из способов-использовать jQuery offset
метод для перевода event.pageX
и event.pageY
координаты из события в положение мыши относительно родителя. Вот пример для дальнейшего использования:
$("#something").click(function(e){
var parentOffset = $(this).parent().offset();
//or $(this).offset(); if you really just want the current element's offset
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
});
чтобы получить положение щелчка относительно текущего элемента щелчка
Используйте этот код
$("#specialElement").click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
});
Я использую этот кусок кода, очень приятно :)
<script language="javascript" src="http://code.jquery.com/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
$(".div_container").mousemove(function(e){
var parentOffset = $(this).parent().offset();
var relativeXPosition = (e.pageX - parentOffset.left); //offset -> method allows you to retrieve the current position of an element 'relative' to the document
var relativeYPosition = (e.pageY - parentOffset.top);
$("#header2").html("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>")
}).mouseout(function(){
$("#header2").html("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>")
});
});
</script>
Это решение поддерживает все основные браузеры, включая IE. Он также заботится о прокрутке. Во-первых, он извлекает положение элемента относительно страницы эффективно и без использования рекурсивной функции. Затем он получает x и y щелчка мыши относительно страницы и делает вычитание, чтобы получить ответ, который является положением относительно элемента (элемент может быть изображением или div, например):
function getXY(evt) {
var element = document.getElementById('elementId'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var scrollTop = document.documentElement.scrollTop?
document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?
document.documentElement.scrollLeft:document.body.scrollLeft;
var elementLeft = rect.left+scrollLeft;
var elementTop = rect.top+scrollTop;
if (document.all){ //detects using IE
x = event.clientX+scrollLeft-elementLeft; //event not evt because of IE
y = event.clientY+scrollTop-elementTop;
}
else{
x = evt.pageX-elementLeft;
y = evt.pageY-elementTop;
}
@AbdulRahim ответ почти правильный. Но я предлагаю функцию ниже в качестве замены (для получения ссылки):
function getXY(evt, element) {
var rect = element.getBoundingClientRect();
var scrollTop = document.documentElement.scrollTop?
document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?
document.documentElement.scrollLeft:document.body.scrollLeft;
var elementLeft = rect.left+scrollLeft;
var elementTop = rect.top+scrollTop;
x = evt.pageX-elementLeft;
y = evt.pageY-elementTop;
return {x:x, y:y};
}
$('#main-canvas').mousemove(function(e){
var m=getXY(e, this);
console.log(m.x, m.y);
});
Если вы сделаете свой родительский элемент "position: relative", то он будет" offset parent " для материала, над которым вы отслеживаете события мыши. Таким образом, jQuery "position()" будет относительно этого.
вот один, который также дает вам процентное положение точки в случае, если вам это нужно. https://jsfiddle.net/Themezly/2etbhw01/
function ThzhotspotPosition(evt, el, hotspotsize, percent) {
var left = el.offset().left;
var top = el.offset().top;
var hotspot = hotspotsize ? hotspotsize : 0;
if (percent) {
x = (evt.pageX - left - (hotspot / 2)) / el.outerWidth() * 100 + '%';
y = (evt.pageY - top - (hotspot / 2)) / el.outerHeight() * 100 + '%';
} else {
x = (evt.pageX - left - (hotspot / 2));
y = (evt.pageY - top - (hotspot / 2));
}
return {
x: x,
y: y
};
}
$(function() {
$('.box').click(function(e) {
var hp = ThzhotspotPosition(e, $(this), 20, true); // true = percent | false or no attr = px
var hotspot = $('<div class="hotspot">').css({
left: hp.x,
top: hp.y,
});
$(this).append(hotspot);
$("span").text("X: " + hp.x + ", Y: " + hp.y);
});
});
.box {
width: 400px;
height: 400px;
background: #efefef;
margin: 20px;
padding: 20px;
position: relative;
top: 20px;
left: 20px;
}
.hotspot {
position: absolute;
left: 0;
top: 0;
height: 20px;
width: 20px;
background: green;
border-radius: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<p>Hotspot position is at: <span></span></p>
</div>