Форум

poweroff · #1 (**permalink**) 11.09.2009, 17:48

Здраствуйте.
Только начинаю изучать JS, вот написал небольшой скрипт и стразу столкнулся с непреятностью.

<html>
 <head>
  <script type="application/x-javascript">
function clk() {
	alert(event.offsetX);
}
  </script>
 </head>
 <body>
   <form>
       <input type="button" name="but" value="click" id="but" onclick="clk()">
   </form>
 </body>
</html>

К сожелению этот скрипт у меня работает только в opera.10, так же узнал что использования event не рекомендуется уже. Вопрос, как кросбраузерно узнать координаты курсора в нутри объекта?

Octane · #2 (**permalink**) 11.09.2009, 17:58

Координаты мыши: clientX(Y)/pageX(Y)

poweroff · #3 (**permalink**) 11.09.2009, 20:05

Спасибо за сылку. Переделал скрипт, но почемуто не работает.

<html>
<head>
<script langauge = "application/x-javascript">
document.getElementById('mybut').onclick=function()
{
    e = e || window.event
 
    if (e.pageX == null && e.clientX != null ) { 
        var html = document.documentElement
        var body = document.body
 
        e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
        e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
        alert(e.pageX+':'+e.pageY)
    }
}
</script>
</head>
<body>
  <form>
    <input type="button" value="Жми" id="mybut"/>
  </form>
</body>
</html

Как я понял надо переменную e передать в функцию, но как?

Octane · #4 (**permalink**) 11.09.2009, 20:20

Сообщение от poweroff

Как я понял надо переменную e передать в функцию, но как?

Браузер сам передаст в момент возникновения события, нужно просто описать ее, как 1-й аргумент функции:

…onclick=function(e)

И вы выполняете поиск элемента по идентификатору до того, как он появится в документе. Нужно отложить выполнения скрипта до окончания загрузки документа, например так:

window.onload = function() {
    document.getElementById('mybut').onclick = function(e) {
        …
    }
};

Или разместить скрипт после элемента, который используете, а не в внутри <head>

Сообщение от poweroff

<script langauge = "application/x-javascript">

Откуда вы такое взяли?

<script type="text/javascript">

poweroff · #5 (**permalink**) 11.09.2009, 20:40

Вроде всё поправил, но воз и ныне там. if не сробатывает.

<html>
<head>
<script langauge = "application/x-javascript">
window.onload = function() {
 document.getElementById('mybut').onclick=function(e)
 {
     e = e || window.event

     if (e.pageX == null && e.clientX != null ) { 
         var html = document.documentElement
         var body = document.body
   
         e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
         e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
         alert(e.pageX+':'+e.pageY)
     } 
 }
};
</script>
</head>
<body>
  <form>
    <input type="button" value="Жми" id="mybut">
  </form>
</body>
</html>

Octane · #6 (**permalink**) 11.09.2009, 20:48

Наверное, не внимательно читали статью, все что у вас внутри if выполнится только в Internet Explorer, а в W3C-совместимых браузерах уже есть свойства e.pageX и e.pageY и ничего дополнительного делать не нужно:

window.onload = function() {
	document.getElementById('mybut').onclick = function(e) {
		e = e || window.event;
		if(e.pageX == null && e.clientX != null) { 
			var html = document.documentElement, body = document.body;
			e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
			e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
		}
		alert([e.pageX, e.pageY]); 
	};
};

poweroff · #7 (**permalink**) 11.09.2009, 21:59

Большое спасибо Octane.

Vanya · #8 (**permalink**) 05.05.2013, 16:19

Сообщение от poweroff

Здраствуйте.
Только начинаю изучать JS, вот написал небольшой скрипт и стразу столкнулся с непреятностью.

<html>
 <head>
  <script type="application/x-javascript">
function clk() {
	alert(event.offsetX);
}
  </script>
 </head>
 <body>
   <form>
       <input type="button" name="but" value="click" id="but" onclick="clk()">
   </form>
 </body>
</html>

К сожелению этот скрипт у меня работает только в opera.10, так же узнал что использования event не рекомендуется уже. Вопрос, как кросбраузерно узнать координаты курсора в нутри объекта?

nu vopervix object event ponimaet tolko IE, a ostalnie neznayut,ya privedu primer kak krosbrauserno reshit etu problemu :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
#result{
background:#2AF06C;
margin-left:1500px;
width:300px;
padding:20px;
position:absolute;
}
*{
cursor:crosshair;
}
</style>
<script type="text/javascript">
window.onload=function ()
{
var img=document.getElementById("img");
/*dvijenie mishki*/
img.onmousemove = foo;
/*najatie mishki*/
img.onmousedown = foo;
/*rasjatie mishki*/
img.onmouseup = foo;
/*najatie klavishi*/
img.onkeydown = foo;
/*rasjatie klavishi*/
img.onkeyup = foo;
}
function foo(evt)
{
if(!evt) evt = event;
var result=document.getElementById("result");
result.innerHTML =
"x: " + evt.x + "<br>"+
"y: " + evt.y + "<br>"+
"clientX: " + evt.clientX + "<br>"+
"clientY: " + evt.clientY + "<br>"+
"offsetX: " + evt.offsetX + "<br>"+
"offsetY: " + evt.offsetY + "<br>"+
"screenX: " + evt.screenX + "<br>"+
"screenY: " + evt.screenY + "<br>"+
"button: " + evt.button + "<br>"+
"keyCode: " + evt.keyCode + "<br>"+
"altKey: " + evt.altKey + "<br>"+
"shiftKey: " + evt.shiftKey + "<br>"+
"ctrlKey: " + evt.ctrlKey + "<br>"/* +
"srcElement: " + evt.srcElement.tagName; */
}
</script>

</head>
<body>
<h1>privet</h1>
<div id="result">234</div>
<img src="images/1.jpg" id="img">
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript