Javascript мыши координаты и объявление DOCTYPE
Я хочу показать координаты мыши на странице, и когда я не объявляю DOCTYPE, это работает, но когда я объявляю DOCTYPE, это не так! Не могли бы вы помочь мне с этим? вот мой код:
<html>
<head>
<title>problem</title>
</head>
<body>
text...
<div id="show"></div>
<script>
document.body.onmousemove = function(event) {
document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
}
</script>
</body>
</html>
В приведенном выше коде я могу получить координаты y без проблем, но когда я добавляю тип документа, он не показывает координаты y правильно:
<DOCTYPE html>
<html>
<head>
<title>problem</title>
</head>
<body>
text...
<div id="show"></div>
<script>
document.body.onmousemove = function(event) {
document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
}
</script>
</body>
</html>
РЕДАКТИРОВАТЬ
Вот мой код, и теперь он отлично работает. Спасибо вам всем:
<!DOCTYPE html>
<html>
<head>
<title>problem</title>
</head>
<body>
text...
<div id="show"></div>
<script>
if (document.addEventListener) {
document.addEventListener('mousemove', function(event) {
document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
});
} else {
document.attachEvent("onmousemove", function(event) {
document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
});
}
</script>
</body>
</html>
2 ответа
Попробуйте выполнить прослушивание события мыши с помощью обработчика событий, например:
<!DOCTYPE html>
<html>
<head>
<title>problem</title>
</head>
<body>
text...
<div id="show"></div>
<script>
document.addEventListener('mousemove', function(event) {
document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
});
</script>
</body>
</html>
Во-первых, правильное объявление DOCTYPE
написав <!DOCTYPE html>
вместо <DOCTYPE html>
,
Во-вторых, измените ваш скрипт на:
document.addEventListener('mousemove', function(event) {
document.body.innerHTML = "X: " + event.clientX + "<br />" + "Y: " + event.clientY;
});
За параметры, передаваемые в функцию, можно обращаться напрямую, записывая window.event
будет когда event
будет ребенком window
объект, другими словами, глобальный объект.