event.clientX в firefox
Всем привет!)
консоль ошибок в firefox: TypeError: event is undefined а в хроме работает В коде в обработчике для события mouseover не получается получить точки курсора мыши с помощью event.clientX. что делать? :) |
|
|
рони,
ошибка исчезла, но попробовал alert(event.clientX); // не отрабатывает Deff, буду пробовать |
div.onmouseover = function(event) { // забыл параметр event передать, всем спасибо
|
Как узнать отпустил ли пользователь левую кнопку мыши для события onmousedown?
Есть ли какое-нибудь свойство, которое проверяет зажата ли еще кнопка? |
BaVa,
а чем вас onmouseup неустраивает? |
рони,
я делаю скрипт, с помощью которого при наведении на угол элемента и клике можно было изменять размер div, пока не отпустишь кнопку. не пойму как сделать обработчик, работающий во время зажатия кнопки Сначала я думал, что mousedown работает все время работает при зажатии левой кнопке, но размер div изменялся по 2px и останавливался Сейчас делаю заново и вот кое какие наброски
var doc = document;
onload = function() {
var t, r, b, l;
var div = doc.getElementsByTagName("div")[0];
div.onmousemove = function(event) {
var e = event || window.event;
var x = e.clientX;
var y = e.clientY;
t = div.getBoundingClientRect().top;
r = div.getBoundingClientRect().right;
b = div.getBoundingClientRect().bottom;
l = div.getBoundingClientRect().left;
div.innerHTML = "top: " + t + "<br>right: " + r + "<br>bottom: " + b + "<br>left: "+ l; // смотрю как изменяется
if((e.clientX+1 == r) && (e.clientY+1 == b))
div.style.cursor = "se-resize";
else
div.style.cursor = "default";
}
div.onmousedown = function(event) {
var e = event || window.event;
var x = e.clientX;
var y = e.clientY;
t = div.getBoundingClientRect().top;
r = div.getBoundingClientRect().right;
b = div.getBoundingClientRect().bottom;
l = div.getBoundingClientRect().left;
}
}
|
BaVa,
Ну вот как-то так в первом приближении ... тянуть за правый нижний:write:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style type="text/css">
div{
border: #3366FF 2px solid;
height: 200px;
width: 200px;
background-color: #CCFFFF;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var doc = document;
window.onload = function() {
var t, r, b, l;
var xx,yy,rr,bb,f=!1;
var div = doc.getElementsByTagName("div")[0];
t = div.getBoundingClientRect().top;
r = div.getBoundingClientRect().right;
b = div.getBoundingClientRect().bottom;
l = div.getBoundingClientRect().left;
div.onmousemove = function(event) {
var e = event || window.event;
var x = e.clientX;
var y = e.clientY;
t = div.getBoundingClientRect().top;
r = div.getBoundingClientRect().right;
b = div.getBoundingClientRect().bottom;
l = div.getBoundingClientRect().left;
div.innerHTML = "top: " + t + "<br>right: " + r + "<br>bottom: " + b + "<br>left: "+ l; // смотрю как изменяется
if((e.clientX > r-15) && (e.clientY> b-15))
{div.style.cursor = "se-resize";div.style.backgroundColor="#FFFF66"
}
else
{div.style.cursor = "default";div.style.backgroundColor="#CCFFFF"};
if(f){
div.style.width=rr - (xx - x) + "px"
div.style.height=bb - (yy -y) + "px"
}
}
div.onmousedown = function(event) {
var e = event || window.event;
xx = e.clientX;
yy = e.clientY;
rr = div.getBoundingClientRect().right;
bb = div.getBoundingClientRect().bottom;
if((e.clientX > r-15) && (e.clientY> b-15))f = !0;
}
div.onmouseup = function(event) {
f=!1
}
div.onmouseover = function(event) {
div.style.backgroundColor="#CCFFFF"};
}
</script>
</body>
</html>
|
рони,
спасибо, буду разбираться) а что значит f=!1? то есть все, но только не один? или как |
| Часовой пояс GMT +3, время: 19:20. |