Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

zh-cn(update): sync dragenter for the English #10544

Merged
merged 4 commits into from
Dec 8, 2022
Merged

zh-cn(update): sync dragenter for the English #10544

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e777355
zh-cn(update): sync dragenter for the English
fwqaaq Dec 8, 2022
b088560
Update files/zh-cn/web/api/htmlelement/dragenter_event/index.md
fwqaaq Dec 8, 2022
5db64c6
Update files/zh-cn/web/api/htmlelement/dragenter_event/index.md
fwqaaq Dec 8, 2022
e0a8be9
Update files/zh-cn/web/api/htmlelement/dragenter_event/index.md
fwqaaq Dec 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
181 changes: 113 additions & 68 deletions files/zh-cn/web/api/htmlelement/dragenter_event/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,126 @@
---
title: dragenter
title: 'HTMLElement: dragenter event'
fwqaaq marked this conversation as resolved.
Show resolved Hide resolved
slug: Web/API/HTMLElement/dragenter_event
original_slug: Web/API/Document/dragenter_event
---

当拖动的元素或被选择的文本进入有效的放置目标时， `dragenter` 事件被触发。

## 基本信息

<table class="properties">
<tbody>
<tr>
<td>是否冒泡</td>
<td>是</td>
</tr>
<tr>
<td>是否可取消</td>
<td>是</td>
</tr>
<tr>
<td>目标对象</td>
<td>用户指定的元素或者 body 元素</td>
</tr>
<tr>
<td>接口</td>
<td>{{domxref("DragEvent")}}</td>
</tr>
<tr>
<td>默认动作</td>
<td>取消拖动</td>
</tr>
</tbody>
</table>

## 属性

| 属性 | 类型 | 描述 |
| ---------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `target` {{readonlyInline}} | [`EventTarget`](/zh-CN/docs/Web/API/EventTarget) | 被拖动的元素下面的元素。 |
| `type` {{readonlyInline}} | [`DOMString`](/zh-CN/docs/Web/API/DOMString) | 事件类型 |
| `bubbles` {{readonlyInline}} | [`Boolean`](/zh-CN/docs/Web/API/Boolean) | 事件是否正常冒泡 |
| `cancelable` {{readonlyInline}} | [`Boolean`](/zh-CN/docs/Web/API/Boolean) | 事件是否已被取消？ |
| `view` {{readonlyInline}} | [`WindowProxy`](/zh-CN/docs/Web/API/WindowProxy) | [`document.defaultView`](/zh-CN/docs/Web/API/Document/defaultView) (`window` of the document) |
| `detail` {{readonlyInline}} | `long` (`float`) | 0. |
| `dataTransfer` | DataTransfer | The data that underlies a drag-and-drop operation, known as the [drag data store](/zh-CN/docs/Web/API/DataTransfer). Protected mode. |
| `currentTarget` {{readonlyInline}} | EventTarget | 触发事件的元素 |
| `relatedTarget` {{readonlyInline}} | EventTarget | For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise. |
| `screenX` {{readonlyInline}} | long | 全局（屏幕）坐标中鼠标指针的 X 坐标。 |
| `screenY` {{readonlyInline}} | long | 全局（屏幕）坐标中鼠标指针的 Y 坐标。 |
| `clientX` {{readonlyInline}} | long | 本地（DOM 内容）坐标中鼠标指针的 X 坐标。 |
| `clientY` {{readonlyInline}} | long | 本地（DOM 内容）坐标中鼠标指针的 Y 坐标。 |
| `button` {{readonlyInline}} | unsigned short | 鼠标事件触发时按下的按钮号：左键= 0，中键= 1（如果存在），右键= 2。对于配置为左手使用的鼠标，其中按钮操作反转，则值从右向左读取。 |
| `buttons` {{readonlyInline}} | unsigned short | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 \| 2). [More info](/zh-CN/docs/Web/API/MouseEvent). |
| `mozPressure` {{readonlyInline}} | float | 触发事件时屏幕的压力值，介于 0.0 到 1.0 之间 |
| `ctrlKey` {{readonlyInline}} | boolean | 事件触发时 ctrl 键是否被按下 |
| `shiftKey` {{readonlyInline}} | boolean | 事件触发时 shift 键是否被按下 |
| `altKey` {{readonlyInline}} | boolean | 事件触发时 alt 键是否被按下 |
| `metaKey` {{readonlyInline}} | boolean | 事件触发时 meta 键是否被按下 |

## 示例：dropzone

{{page('/zh-CN/docs/Web/Events/dragstart', '示例：dropzone')}}
{{APIRef}}

当可拖动的元素或者被选择的文本进入一个有效的放置目标，触发 `dragenter` 事件。
fwqaaq marked this conversation as resolved.
Show resolved Hide resolved

目标对象是*用户直接选择的范围*（由用户直接指示作为放置目标的元素），或者 {{HTMLElement("body")}} 元素。

## 语法

在 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等方法中使用事件名称，或者设置一个事件属性。
fwqaaq marked this conversation as resolved.
Show resolved Hide resolved

```js
addEventListener('dragenter', (event) => {});

ondragenter = (event) => { };
```

## 事件类型

一个 {{domxref("DragEvent")}}。继承自 {{domxref("Event")}}。

{{InheritanceDiagram("DragEvent")}}

## 事件属性

*除了以下的属性，来自父接口 {{domxref("Event")}} 的属性也是可用的。*

- {{domxref('DragEvent.dataTransfer')}} {{ReadOnlyInline}}
- : 在拖放交互期间转移的数据。

## 示例

### dragenter 事件触发时放置区域的样式

在该示例中，我们在容器中有一个可拖动的元素。尝试抓住元素，拖动它进入另一个容器，然后释放它。

当拖动的元素在另一个容器上时，我们监听的 `dragenter` 事件将给它一个紫色的背景，以表明可拖动的元素可以放置到该容器中。

注意，在这个部分示例中，我们还没有实现放置：关于拖放的完整示例，请参见 [`drag`](/zh-CN/docs/Web/API/HTMLElement/drag_event) 事件这页。

#### HTML

```html
<div class="dropzone">
<div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone" id="droptarget"></div>
```

#### CSS

```css
body {
/* Prevent the user selecting text in the example */
user-select: none;
}

#draggable {
text-align: center;
background: white;
}

.dropzone {
width: 200px;
height: 20px;
background: blueviolet;
margin: 10px;
padding: 10px;
}

.dropzone.dragover {
background-color: purple;
}
```

#### JavaScript

```js
const target = document.getElementById("droptarget");
target.addEventListener("dragenter", (event) => {
// highlight potential drop target when the draggable element enters it
if (event.target.classList.contains("dropzone")) {
event.target.classList.add("dragover");
}
});

target.addEventListener("dragleave", (event) => {
// reset background of potential drop target when the draggable element leaves it
if (event.target.classList.contains("dropzone")) {
event.target.classList.remove("dragover");
}
});
```

#### 结果

{{EmbedLiveSample('dragenter 事件触发时放置区域的样式')}}

## 规范

{{Specifications}}

## 浏览器支持
## 浏览器兼容性

{{Compat}}

## 相关
## 参见

- 其它拖放事件：

- {{domxref("HTMLElement/drag_event", "drag")}}
- {{domxref("HTMLElement/dragstart_event", "dragstart")}}
- {{domxref("HTMLElement/dragend_event", "dragend")}}
- {{domxref("HTMLElement/dragover_event", "dragover")}}
- {{domxref("HTMLElement/dragleave_event", "dragleave")}}
- {{domxref("HTMLElement/drop_event", "drop")}}

- 其它目标中的该事件：

- [`drag`](/zh-CN/docs/Web/API/HTMLElement/drag_event)
- [`dragstart`](/zh-CN/docs/Web/API/HTMLElement/dragstart_event)
- [`dragend`](/zh-CN/docs/Web/API/HTMLElement/dragend_event)
- [`dragover`](/zh-CN/docs/Web/API/HTMLElement/dragover_event)
- [`dragenter`](/zh-CN/docs/Web/API/HTMLElement/dragenter_event)
- [`dragleave`](/zh-CN/docs/Web/API/HTMLElement/dragleave_event)
- [`drop`](/zh-CN/docs/Web/API/HTMLElement/drop_event)
- {{domxref("Window")}}：{{domxref("Window/dragenter_event", "dragenter")}} 事件
- {{domxref("Document")}}：{{domxref("Document/dragenter_event", "dragenter")}} 事件
- {{domxref("SVGElement")}}：{{domxref("SVGElement/dragenter_event", "dragenter")}} 事件