Форум

BaVa · #1 (**permalink**) 30.01.2013, 17:08

Всем привет!)
консоль ошибок в firefox:
TypeError: event is undefined

а в хроме работает
В коде в обработчике для события mouseover не получается получить точки курсора мыши с помощью event.clientX. что делать?

Deff · #2 (**permalink**) 30.01.2013, 17:21

http://javascript.ru/tutorial/events/properties#demo

рони · #3 (**permalink**) 30.01.2013, 17:24

BaVa,
Кроссбраузерное решение

Универсальное решение для получения объекта события

BaVa · #4 (**permalink**) 30.01.2013, 17:34

рони,
ошибка исчезла, но попробовал

alert(event.clientX); // не отрабатывает

Deff,
буду пробовать

BaVa · #5 (**permalink**) 30.01.2013, 17:35

div.onmouseover = function(event) { // забыл параметр event передать, всем спасибо

BaVa · #6 (**permalink**) 31.01.2013, 17:34

Как узнать отпустил ли пользователь левую кнопку мыши для события onmousedown?
Есть ли какое-нибудь свойство, которое проверяет зажата ли еще кнопка?

рони · #7 (**permalink**) 31.01.2013, 17:44

BaVa,
а чем вас onmouseup неустраивает?

BaVa · #8 (**permalink**) 31.01.2013, 17:51

рони,
я делаю скрипт, с помощью которого при наведении на угол элемента и клике можно было изменять размер 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;
	}
}

рони · #9 (**permalink**) 31.01.2013, 19:44

BaVa,
Ну вот как-то так в первом приближении ... тянуть за правый нижний

<!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>

BaVa · #10 (**permalink**) 31.01.2013, 21:35

рони,
спасибо, буду разбираться)
а что значит f=!1? то есть все, но только не один? или как

Форум

Справочник

Discord чат

Курсы javascript