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? то есть все, но только не один? или как |
Цитата:
|
а есть ли похожее для true?
|
Цитата:
|
f = !0; // true f = !1; // false :) |
Вот сделал чуть по другому
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>resizeDiv</title>
<script type="text/javascript">
var doc = document;
function move(event) {
var div = doc.getElementsByTagName("div")[0];
var e = event || window.event;
var t, r, b, l;
t = div.getBoundingClientRect().top;
r = div.getBoundingClientRect().right;
b = div.getBoundingClientRect().bottom;
l = div.getBoundingClientRect().left;
div.style.width = (e.clientX - l) + "px";
div.style.height= (e.clientY - t) + "px";
}
function up(event) {
document.removeEventListener("mouseup", up, true);
document.removeEventListener("mousemove", move, true);
}
onload = function() {
var div = doc.getElementsByTagName("div")[0];
div.onmousemove = function(event) {
var e = event || window.event;
var x = e.clientX;
var y = e.clientY;
var t, r, b, l;
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;
var t, r, b, l;
t = div.getBoundingClientRect().top;
r = div.getBoundingClientRect().right;
b = div.getBoundingClientRect().bottom;
l = div.getBoundingClientRect().left;
if((e.clientX+1 == r) && (e.clientY+1 == b)) {
document.addEventListener("mousemove", move, true);
document.addEventListener("mouseup", up, true);
}
}
}
onmousemove = function(event) {
var e = event || window.event;
var mX = doc.getElementById("mouseX");
var mY = doc.getElementById("mouseY");
mX.value = "" + e.clientX;
mY.value = "" + e.clientY;
}
</script>
<style type="text/css">
div {
border: 2px solid #000;
}
</style>
</head>
<body>
<p>
x: <input type="text" id="mouseX"><br>
y: <input type="text" id="mouseY"><br>
</p>
<div style="width: 400px; height: 200px;">
</div>
<span></span>
</body>
</html>
|
BaVa,
в тег [html добавте run тогда ваш код можно будет посмотреть прямо тут |
сделал :)
а как сделать больше ту область которая появляется после нажатия "Посмотреть!"? |
| Часовой пояс GMT +3, время: 15:49. |