菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

JS 参考手册

按类别划分的 JS 按字母划分的 JS

JavaScript

JS 数组 JS 布尔值 JS 类 JS 日期 JS 错误 JS 全局 JS JSON JS Map JS Math JS 数字 JS 对象 JS 运算符 JS 优先级 JS Promise JS 正则表达式 JS Set JS 语句 JS 字符串 JS TypedArray

Window

Window 对象 Window Console Window History Window Location Window Navigator Window Screen

HTML DOM

HTML 文档 HTML 元素 HTML 属性 HTML 集合 HTML NodeList HTML DOMTokenList HTML 样式
alignContent alignItems alignSelf animation animationDelay animationDirection animationDuration animationFillMode animationIterationCount animationName animationTimingFunction animationPlayState background backgroundAttachment backgroundClip backgroundColor backgroundImage backgroundOrigin backgroundPosition backgroundRepeat backgroundSize backfaceVisibility border borderBottom borderBottomColor borderBottomLeftRadius borderBottomRightRadius borderBottomStyle borderBottomWidth borderCollapse borderColor borderImage borderImageOutset borderImageRepeat borderImageSlice borderImageSource borderImageWidth borderLeft borderLeftColor borderLeftStyle borderLeftWidth borderRadius borderRight borderRightColor borderRightStyle borderRightWidth borderSpacing borderStyle borderTop borderTopColor borderTopLeftRadius borderTopRightRadius borderTopStyle borderTopWidth borderWidth bottom boxShadow boxSizing captionSide caretColor clear clip color columnCount columnFill columnGap columnRule columnRuleColor columnRuleStyle columnRuleWidth columns columnSpan columnWidth counterIncrement counterReset cssFloat cursor direction display emptyCells filter flex flexBasis flexDirection flexFlow flexGrow flexShrink flexWrap font fontFamily fontSize fontStyle fontVariant fontWeight fontSizeAdjust height isolation justifyContent left letterSpacing lineHeight listStyle listStyleImage listStylePosition listStyleType margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth objectFit objectPosition opacity order orphans outline outlineColor outlineOffset outlineStyle outlineWidth overflow overflowX overflowY padding paddingBottom paddingLeft paddingRight paddingTop pageBreakAfter pageBreakBefore pageBreakInside perspective perspectiveOrigin position quotes resize right scrollBehavior tableLayout tabSize textAlign textAlignLast textDecoration textDecorationColor textDecorationLine textDecorationStyle textIndent textOverflow textShadow textTransform top transform transformOrigin transformStyle transition transitionProperty transitionDuration transitionTimingFunction transitionDelay unicodeBidi userSelect verticalAlign visibility width wordBreak wordSpacing wordWrap widows zIndex

HTML 事件

HTML 事件 HTML 事件对象 HTML 事件属性 HTML 事件方法

Web API

API Canvas API Console API Fetch API Fullscreen API 地理位置 API History API MediaQueryList API Storage API 验证 API Web

HTML 对象

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <tfoot> <th> <thead> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

其他参考

CSSStyleDeclaration JS 转换


ondragleave 事件

示例

当可拖拽元素移出拖放目标时调用函数

<div ondragleave="myFunction(event)"></div>
自己动手试一试 »

更多示例见下文。


描述

ondragleave 事件在可拖拽选择离开拖放目标时发生。

ondragenterondragleave 事件可以帮助用户更好地理解可拖拽元素何时在拖放目标上方。例如,当可拖拽元素进入拖放目标时设置背景颜色,当元素移出目标时移除颜色。

拖放是 HTML 中的常见功能。它指的是“抓取”一个对象并将其拖动到不同位置的操作。

要使元素可拖拽,请使用draggable 属性

更多信息请参见HTML 拖放教程

链接和图片默认可拖拽,不需要 draggable 属性。

在拖放操作的不同阶段会发生许多事件(见下文)

拖放事件

在可拖拽元素上

事件发生时间
ondrag 元素正在被拖拽
ondragstart 用户开始拖拽一个元素
ondragend 用户已完成拖拽一个元素

注意:在拖拽元素时,ondrag 事件每 350 毫秒触发一次。

在拖放目标上

事件发生时间
ondragenter 被拖拽元素进入放置目标
ondragleave 被拖拽元素离开放置目标
ondragover 被拖拽元素在放置目标上方
ondrop 被拖拽元素被放置到目标上

另请参阅

拖放事件对象
draggable 属性

教程

HTML 拖放


语法

在 HTML 中

<元素 ondragleave="myScript">
自己动手试一试 »

在 JavaScript 中

对象.ondragleave = function(){myScript};
自己动手试一试 »

在 JavaScript 中,使用 addEventListener() 方法

对象.addEventListener("dragleave", myScript);
自己动手试一试 »

技术详情

冒泡
可取消
事件类型 DragEvent
HTML 标签 所有 HTML 元素
DOM 版本 Level 3 Events


更多示例

示例

所有可能拖放事件的演示

<p draggable="true" id="dragtarget">拖动我!</p>

<div class="droptarget">拖放到此处!</div>

<script>
// 在拖拽目标上触发的事件

document.addEventListener("dragstart", function(event) {
  // dataTransfer.setData() 方法设置被拖拽数据的数据类型和值
  event.dataTransfer.setData("Text", event.target.id);

  // 在开始拖拽 p 元素时输出一些文本
  document.getElementById("demo").innerHTML = "开始拖拽 p 元素。";

  // 改变可拖拽元素的不透明度
  event.target.style.opacity = "0.4";
});

// 在拖拽 p 元素时,改变输出文本的颜色
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});

// 在完成拖拽 p 元素时输出一些文本并重置不透明度
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "完成拖拽 p 元素。";
  event.target.style.opacity = "1";
});


// 在拖放目标上触发的事件

// 当可拖拽的 p 元素进入拖放目标时,改变 DIV 的边框样式
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});

// 默认情况下,数据/元素不能放置在其他元素中。为了允许放置,我们必须阻止元素的默认处理
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});

// 当可拖拽的 p 元素离开拖放目标时,重置 DIV 的边框样式
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});

/* 在放置时 - 阻止浏览器对数据的默认处理(默认是放置时作为链接打开)
重置输出文本的颜色和 DIV 的边框颜色
使用 dataTransfer.getData() 方法获取被拖拽的数据
被拖拽的数据是被拖拽元素的 ID ("drag1")
将被拖拽的元素追加到放置元素中
*/
document.addEventListener("drop", function(event) {
  event.preventDefault();
  if ( event.target.className == "droptarget" ) {
    document.getElementById("demo").style.color = "";
    event.target.style.border = "";
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
  }
});
</script>
自己动手试一试 »

浏览器支持

ondragleave 是 DOM Level 3 (2004) 的特性。

所有现代浏览器都完全支持它

Chrome Edge Firefox Safari Opera IE
11


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持