From 5d18c06cf65a281de4d382e124140f1557e67637 Mon Sep 17 00:00:00 2001 From: MDN Date: Fri, 27 Aug 2021 00:49:43 +0000 Subject: [CRON] sync translated content --- .../web/api/mouseevent/pagex/index.html | 106 +++++++++++++++++++++ .../web/api/mouseevent/pagey/index.html | 90 +++++++++++++++++ 2 files changed, 196 insertions(+) create mode 100644 files/zh-cn/conflicting/web/api/mouseevent/pagex/index.html create mode 100644 files/zh-cn/conflicting/web/api/mouseevent/pagey/index.html (limited to 'files/zh-cn/conflicting/web') diff --git a/files/zh-cn/conflicting/web/api/mouseevent/pagex/index.html b/files/zh-cn/conflicting/web/api/mouseevent/pagex/index.html new file mode 100644 index 0000000000..7089c102a8 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/mouseevent/pagex/index.html @@ -0,0 +1,106 @@ +--- +title: UIEvent.pageX +slug: conflicting/Web/API/MouseEvent/pageX +translation_of: Web/API/UIEvent/pageX +original_slug: Web/API/UIEvent/pageX +--- +

{{APIRef("DOM Events")}} {{Non-standard_header}}

+ +

UIEvent.pageX 是只读属性，它返回相对于整个文档的水平坐标。

+ +

语法

+ +
var pos = event.pageX
+ +

示例

+ +
var pageX = event.pageX;
+ +

pageX  是鼠标事件触发时，鼠标指针相对于整个文档 X 坐标上像素点的整数值。这一属性同时也参照了页面的水平滚动距离。

+ +
<html>
+<head>
+<title>pageX\pageY & layerX\layerY example</title>
+
+<script type="text/javascript">
+
+function showCoords(evt){
+  var form = document.forms.form_coords;
+  var parent_id = evt.target.parentNode.id;
+  form.parentId.value = parent_id;
+  form.pageXCoords.value = evt.pageX;
+  form.pageYCoords.value = evt.pageY;
+  form.layerXCoords.value = evt.layerX;
+  form.layerYCoords.value = evt.layerY;
+}
+
+</script>
+
+<style type="text/css">
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+</style>
+</head>
+
+<body onmousedown="showCoords(event)">
+
+<p>To display the mouse coordinates please click anywhere on the page.</p>
+
+<div id="d1">
+<span>This is an un-positioned div so clicking it will return
+layerX/layerY values almost the same as pageX/PageY values.</span>
+</div>
+
+<div id="d2">
+<span>This is a positioned div so clicking it will return layerX/layerY
+values that are relative to the top-left corner of this positioned
+element. Note the pageX\pageY properties still return the
+absolute position in the document, including page scrolling.</span>
+
+<span>Make the page scroll more! This is a positioned div so clicking it
+will return layerX/layerY values that are relative to the top-left
+corner of this positioned element. Note the pageX\pageY properties still
+return the absolute position in the document, including page
+scrolling.</span>
+</div>
+
+<div id="d3">
+<form name="form_coords">
+ Parent Element id: <input type="text" name="parentId" size="7" /><br />
+ pageX:<input type="text" name="pageXCoords" size="7" />
+ pageY:<input type="text" name="pageYCoords" size="7" /><br />
+ layerX:<input type="text" name="layerXCoords" size="7" />
+ layerY:<input type="text" name="layerYCoords" size="7" />
+</form>
+</div>
+
+</body>
+</html>
+
+ +

规范

+ +

这一属性不在规范中。

diff --git a/files/zh-cn/conflicting/web/api/mouseevent/pagey/index.html b/files/zh-cn/conflicting/web/api/mouseevent/pagey/index.html new file mode 100644 index 0000000000..f4c92daa4e --- /dev/null +++ b/files/zh-cn/conflicting/web/api/mouseevent/pagey/index.html @@ -0,0 +1,90 @@ +--- +title: event.pageY +slug: conflicting/Web/API/MouseEvent/pageY +translation_of: Web/API/UIEvent/pageY +original_slug: Web/API/UIEvent/pageY +--- +

{{ ApiRef() }}

+

概述

+

返回事件发生时相对于整个文档的纵坐标.

+

语法

+
var pageY = event.pageY;
+
+

pageY 是事件发生时鼠标指针所在位置相对于整个文档的纵坐标,单位为像素.该属性会考虑到页面滚动条的高度.

+

例子

+
<html>
+<head>
+<title>pageX\pageY & layerX\layerY example</title>
+
+<script type="text/javascript">
+
+function showCoords(evt){
+  var form = document.forms.form_coords;
+  var parent_id = evt.target.parentNode.id;
+  form.parentId.value = parent_id;
+  form.pageXCoords.value = evt.pageX;
+  form.pageYCoords.value = evt.pageY;
+  form.layerXCoords.value = evt.layerX;
+  form.layerYCoords.value = evt.layerY;
+}
+
+</script>
+
+<style type="text/css">
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+</style>
+</head>
+
+<body onmousedown="showCoords(event)">
+
+<p>要显示鼠标所在位置的坐标,请点击页面上的任意地方.</p>
+
+<div id="d1">
+<span>这是一个未定位的div(没有指定css position属性),所以点击它返回的layerX/layerY值几乎和pageX/PageY值完全相同.</span>
+</div>
+
+<div id="d2">
+<span>这是一个已定位的div,因此点击它时返回的layerX/layerY的值是相对于自己左上角(top-left)位置的坐标值.
+然而pageX/pageY属性仍返回该div在文档中的绝对位置,包括页面滚动高度.</span>
+</div>
+
+<div id="d3">
+<form name="form_coords">
+ 父元素id: <input type="text" name="parentId" size="7" /><br />
+ pageX:<input type="text" name="pageXCoords" size="7" />
+ pageY:<input type="text" name="pageYCoords" size="7" /><br />
+ layerX:<input type="text" name="layerXCoords" size="7" />
+ layerY:<input type="text" name="layerYCoords" size="7" />
+</form>
+</div>
+
+</body>
+</html>
+
+

规范

+

不属于任何公开的标准.

+

{{ languages( {"pl": "pl/DOM/event.pageY","en": "en/DOM/event.pageY" } ) }}

-- cgit v1.2.3-54-g00ecf