jQuery функция, не пойму почему так работает
Доброго времени суток, может кто из умнейших знатаков подскажет почему у меня не получается. Задача такая: нужно показывать координаты пока зажата клавиша мыши. Что я делая ни так? После того как я отпуская кнопку, он продолжает показывать координаты.
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(e) {
jQuery("#blo").mousedown(function(e){
jQuery("#blo").mousemove(function(e){
X = e.pageX-jQuery(this).offset().left;
Y = e.pageY-jQuery(this).offset().top;
jQuery("#kor").html("x="+X+"y="+Y);
})
}).mouseup(function(){jQuery("#kor").html("");});
});
</script>
<div id="blo" style="width:500px; height:500px; background-color:#093;"></div>
<div id="kor" ></div>
|
vanoha,
по mousedown устанавливают флаг только что показ возможен и всё -- mouseup снимают флаг -- в mousemove проверяют и показывают данные взависимости от флага либо функции вывода дают имя и по mouseup делают off('mousemove' ,'#blo' , 'имя') |
Ничего не понял. Можно на примере?
|
vanoha, вариант с флагом
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(function() {
var flag = false;
jQuery("#blo").mousemove(function(e) {
X = e.pageX - jQuery(this).offset().left;
Y = e.pageY - jQuery(this).offset().top;
jQuery("#kor").html(flag ? "x=" + X + "y=" + Y : "");
})
jQuery("#blo").mousedown(function(e) {
flag = true
}).mouseup(function() {
flag = false
});
});
</script>
</head>
<body>
<div id="blo" style="width:500px; height:500px; background-color:#093;"></div>
<div id="kor"></div>
</body>
</html>
|
vanoha,
вариант с off
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(function() {
var flag = function(e) {
X = e.pageX - jQuery(this).offset().left;
Y = e.pageY - jQuery(this).offset().top;
jQuery("#kor").html("x=" + X + "y=" + Y);
},
blo = jQuery("#blo");
blo.mousedown(function(e) {
blo.on({
'mousemove': flag
})
}).mouseup(function(e) {
jQuery("#kor").html("");
blo.off({
'mousemove': flag
})
});
});
</script>
</head>
<body>
<div id="blo" style="width:500px; height:500px; background-color:#093;"></div>
<div id="kor"></div>
</body>
</html>
|
Спасибо огромное, всё получилось. Только я пробовал сделать что то типа первого варианта у меня не выходила переменная из функции... Я задавал не false-true, а 1-0. но почему то в переменную не попадало, а тут всё работает... Пробовал ещё 1-0 вставлять в атрибут а затем проверять значение атрибута, была та же фигня. А за эти скрипты спасибо, всё работает, буду разбираться что я делал не правильно...
|
| Часовой пояс GMT +3, время: 05:48. |