Online Tutorial ng CodeW3C
Serye ng Tutorial ng HTML
Browser Script
Server Script
Tutorial ng Programming
Serye ng Tutorial ng XML
Manwal ng Pagbuo ng Website
Manwal ng Tanggap
Kurso na Gawa
JS Tagalang Balik-Taga
JS Tagalang Balik-Taga (Kategoryang Pagkakasunod)
JS Tagalang Balik-Taga (Aphabetikong Pagkakasunod)
JavaScript
JS Array
JS Boolean
JS Class
JS Date
JS Error
JS Global
JS JSON
JS Map
JS Math
JS Number
JS Promise
JS RegExp
JS Set
JS String
JS Obheto
JS Operator
JS Operator Priority
JS Statement
JS Tipisadong Array
Window
Object ng Window
Window Console
Window History
Window Location
Window Navigator
Window Screen
HTML DOM
HTML Document
HTML Element
HTML Attribute
HTML Event
HTML Event Obheto
HTML Collection
HTML NodeList
HTML DOMTokenList
HTML Style
Web API
API Canvas
API Console
API Fetch
API Fullscreen
API Geolokasyon
API History
API MediaQueryList
API Storage
API Validadasyon
Web API
HTML Obheto
<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>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
<tr>
<textarea>
</a></li> <li><a href="/tl/jsref/dom_obj_track.html" title="HTML DOM Track Obheto"><track></a></li> <li><a href="/tl/jsref/dom_obj_u.html" title="HTML DOM Underline Obheto"><u></a></li> <li><a href="/tl/jsref/dom_obj_ul.html" title="HTML DOM Ul Obheto"><ul></a></li> <li><a href="/tl/jsref/dom_obj_var.html" title="HTML DOM Variable Obheto"><var></a></li> <li><a href="/tl/jsref/dom_obj_video.html" title="HTML DOM Video Obheto"><video></a></li> </ul> <h2>សំណុំនិពន្ធ</h2> <ul> <li><a href="/tl/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration Obheto">CSSStyleDeclaration</a></li> <li><a href="/tl/jsref/jsref_type_conversion.html" title="JavaScript Tipang-ayos ng uri">JS ការប្រើប្រាស់ប្រភេទ</a></li> </ul> </div> <div><h3><center> អាជ្ញាប័ណ្ណអនុវត្ត </center><h3> <h2>ការលើកឡើងកម្មវិធី：</h2> <ul> <li><a href="/tl/howto/index.html" title="CodeW3C.com Ang Bayan ng mga Pinakamahusay">CodeW3C.com Ang Bayan ng mga Pinakamahusay</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>ondragleave Event</h1> <div class="btn-toref"> <a href="/tl/jsref/dom_obj_event.html" title="Event ng HTML DOM">DOM Event</a> <a href="/tl/jsref/obj_dragevent.html" title="HTML DOM DragEvent">DragEvent</a> </div> <div> <h2>ការអង្គុយសម្រាប់ និងការប្រើប្រាស់</h2> <p>ព្រឹត្តិការណ៍ ondragleave កើតឡើង នៅពេលសមាសធាតុដែលអាចពង្រីក ឬក៏ការជ្រើសរើសអត្ថបទ ចេញពីគោលដៅដែលអាចពង្រីក</p> <p>ondragenter និង ondragleave ព្រឹត្តិការណ៍ អាចជួយអ្នកប្រើស្រាវជ្រាវអំពីសមាសធាតុដែលអាចពង្រីក និងកំពុងចូលទៅគោលដៅដែលអាចពង្រីក ឬក៏ចេញពីគោលដៅដែលអាចពង្រីក។ ឧទាហរណ៍ អាចកំណត់ពណ្ឌពណ៌ផ្ទៃខាងក្រោយ នៅពេលសមាសធាតុដែលអាចពង្រីក ចូលទៅគោលដៅដែលអាចពង្រីក និងដកចេញពណ្ឌពណ៌នៅពេលសមាសធាតុដែលអាចពង្រីក ចេញពីគោលដៅដែលអាចពង្រីក</p> <p>ពង្រីក គឺជាលក្ខណៈមួយដែលច្រើនបំផុតក្នុង HTML5 ។ គឺនៅពេលអ្នក "ចាប់" វត្ថុមួយ និងពង្រីកវាទៅទីតាំងផ្សេងៗ។ សម្រាប់ការរៀននិងចាប់ផ្តើម អាចអានអំពី <a href="/tl/html/html5_draganddrop.html" title="HTML5 Paglipat">HTML5 Paglipat</a>ដើម្បីធ្វើអោយសមាសធាតុអាចពង្រីក គឺអាចប្រើ</p> <p class="note"><span>ការកត់សម្គាល់：</span>HTML ការបង្រៀន <a href="/tl/tags/att_global_draggable.html" title="HTML draggable Atingtang">HTML5 draggable អាចប្រើ</a>。</p> <p class="tip"><span>ការផ្តល់ដំបូន្មាន：</span>ដោយលក្ខណៈបុត្រ បង្ហាញ និងរូបភាព គឺអាចពង្រីក និងមិនចាំបាច់ draggable អាចប្រើ</p> <p>នៅក្នុងវគ្គផ្សេងៗនៃប្រតិបត្តិការពង្រីក មានព្រឹត្តិការណ៍ជាច្រើនត្រូវប្រើ និងអាចកើតឡើង:</p> <p>ព្រឹត្តិការណ៍ដែលបង្កើតនៅលើគោលដៅដែលអាចពង្រីក (សមាសធាតុដើម) គឺ:</p> <ul> <li><a href="/tl/jsref/event_ondragstart.html" title="ondragstart Event">ondragstart</a> - ការកើតឡើងនៅពេលអ្នកចាប់ផ្តើមពង្រីកសមាសធាតុ</li> <li><a href="/tl/jsref/event_ondrag.html" title="ondrag Event">ondrag</a> - ការកើតឡើងនៅពេលសមាសធាតុត្រូវពង្រីក</li> <li><a href="/tl/jsref/event_ondragend.html" title="ondragend Event">ondragend</a> - ការកើតឡើងនៅពេលអ្នកបញ្ចប់ការពង្រីកសមាសធាតុ</li> </ul> <p>ព្រឹត្តិការណ៍ដែលបង្កើតនៅលើគោលដៅដែលអាចពង្រីក:</p> <ul> <li><a href="/tl/jsref/event_ondragenter.html" title="ondragenter Event">ondragenter</a> - ការកើតឡើងនៅពេលសមាសធាតុដែលអាចពង្រីក ចូលទៅក្នុងគោលដៅដែលអាចពង្រីក</li> <li><a href="/tl/jsref/event_ondragover.html" title="ondragover Event">ondragover</a> - ការកើតឡើងនៅពេលសមាសធាតុដែលអាចពង្រីក នៅលើគោលដៅដែលអាចពង្រីក</li> <li><a href="/tl/jsref/event_ondragleave.html" title="ondragleave Event">ondragleave</a> - ការកើតឡើងនៅពេលសមាសធាតុដែលអាចពង្រីក ចេញពីគោលដៅដែលអាចពង្រីក</li> <li><a href="/tl/jsref/event_ondrop.html" title="ondrop Event">ondrop</a> - ការកើតឡើងនៅពេលសមាសធាតុដែលអាចពង្រីក ត្រូវបានដាក់នៅលើគោលដៅដែលអាចពង្រីក</li> </ul> </div> <div> <h2>Eksemplo</h2> <p>ការប្រព្រឹត្ត JavaScript នៅពេលសមាសធាតុដែលអាចពង្រីក ចេញពីគោលដៅដែលអាចពង្រីក</p> <pre class="language-html"> <div ondragleave="myFunction(event)"></div> </pre> <p class="tiy"><a target="_blank" href="/tl/tiy/t.html?f=jsck_error_message">亲自试一试</a></p> <p>ទំព័រខាងក្រោមមាននូវឧទាហរណ៍ TIY ច្រើន</p> </div> <div> <h2>ទ្រង់ទ្រាយ</h2> <p>ក្នុង HTML ក្នុងការប្រើ:</p> <pre class="language-html"> <<i>element</i> ondragleave="<i>myScript</i>"> </pre> <p class="tiy"><a target="_blank" href="/tl/tiy/t.html?f=jsck_error_message">亲自试一试</a></p> <p>ក្នុង JavaScript ក្នុងការប្រើ:</p> <pre class="language-js"> <i>object</i>.ondragleave = function(){<i>myScript</i>}; </pre> <p class="tiy"><a target="_blank" href="/tl/tiy/t.html?f=jsck_error_message">亲自试一试</a></p> <p>ក្នុង JavaScript ក្នុងការប្រើ addEventListener() មែននេះ:</p> <pre class="language-js"> <i>object</i>.addEventListener("dragleave", <i>myScript</i>); </pre> <p class="tiy"><a target="_blank" href="/tl/tiy/t.html?f=jsck_error_message">亲自试一试</a></p> <p class="note"><span>ការកត់សម្គាល់：</span>Internet Explorer 8 ឬក៏ការដំណើរការមុននេះមិនគាំទ្រ <a href="/tl/jsref/met_element_addeventlistener.html" title="HTML DOM addEventListener() Method">addEventListener() 方法</a>。</p> </div> <div> <h2>Detalye ng teknolohiya</h2> <table class="definition-usage"> <tr> <th>Bubbling:</th> <td>Suportado</td> </tr> <tr> <th>Makakansela:</th> <td>Hindi suportado</td> </tr> <tr> <th>Uri ng kaganapan:</th> <td><a href="/tl/jsref/obj_dragevent.html" title="HTML DOM DragEvent">DragEvent</a></td> </tr> <tr> <th>Ang mga pinagmumulan ng HTML na tag na suportado:</th> <td>Lahat ng HTML na elemento</td> </tr> <tr> <th style="width: 25%;">DOM na bersyon:</th> <td>Level 3 Events</td> </tr> </table> </div> <div> <h2>Suporta ng Browser</h2> <p>Ang numero sa talahanayan ay nagtutukoy sa unang bersyon ng browser na nagbibigay ng ganap na suporta sa kaganapan.</p> <table class="browser-support"> <tr> <th class="bsTh">Kaganapan</th> <th class="bsChrome">Chrome</th> <th class="bsIE">IE</th> <th class="bsFirefox">Firefox</th> <th class="bsSafari">Safari</th> <th class="bsOpera">Opera</th> </tr> <tr> <td>ondragleave</td> <td>4.0</td> <td>9.0</td> <td>3.5</td> <td>6.0</td> <td>12.0</td> </tr> </table> </div> <div> <h2>Eksemplo</h2> <p>Isang pagtatanghal sa lahat ng posibleng mga kaganapan ng pag-drag at i-drop:</p> <pre class="language-html"> <p draggable="true" id="dragtarget">I-drag ko!</p> <div class="droptarget">Mag-i-drop dito!</div> <script> /* ----------------- Ang mga kaganapan na nangyari sa target na idrag ----------------- */ document.addEventListener("dragstart", function(event) { // Ang method na dataTransfer.setData() ay nag-set ng uri ng data at ang halaga ng data na inidrag event.dataTransfer.setData("Text", event.target.id); // Pagkatapos nagsimula ang pag-i-drag ng p element, i-output ang ilang teksto document.getElementById("demo").innerHTML = "Nagsimula ang pag-i-drag ng p element."; // Pag-i-change ang transparency ng nag-aallow drag element event.target.style.opacity = "0.4"; }); // Pag-i-change ang kulay ng teksto sa pag-i-drag ng p element document.addEventListener("drag", function(event) { document.getElementById("demo").style.color = "red"; }); // Pagkatapos nang i-drag ang p element, i-output ang ilang teksto at i-reset ang transparency document.addEventListener("dragend", function(event) { document.getElementById("demo").innerHTML = "Natapos na i-drag ang p element."; event.target.style.opacity = "1"; }); /* ----------------- 在放置目标上触发的事件 ----------------- */ // 当可拖动的 p 元素进入 droptarget 时，改变 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 元素离开 droptarget 时，重置 DIV 的边框样式 document.addEventListener("dragleave", function(event) { if ( event.target.className == "droptarget" ) { event.target.style.border = ""; } }); /* On drop - 防止浏览器对数据的默认处理（默认放置时以链接打开） 重置输出文本的颜色和 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> </pre> <p class="tiy"><a target="_blank" href="/tl/tiy/t.html?f=event_ondrag_all">亲自试一试</a></p> </div> <div> <h2>相关页面</h2> <p><a href="/tl/html/html5_draganddrop.html" title="HTML5 Paglipat">HTML 教程：HTML5 拖放</a></p> <p><a href="/tl/tags/att_global_draggable.html" title="HTML draggable Atingtang">HTML 参考手册：HTML draggable 属性</a></p> </div> <div class="btn-toref"> <a href="/tl/jsref/dom_obj_event.html" title="Event ng HTML DOM">DOM Event</a> <a href="/tl/jsref/obj_dragevent.html" title="HTML DOM DragEvent">DragEvent</a> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div> <!-- maincontent end --> <div id="sidebar"> <div><h3><center> Toolbox </center><h3> <h5 id="tools_reference"><a href="/tl/jsref/index.html">Manwal ng Tanggap ng JavaScript at HTML DOM</a></h5> <h5 id="tools_example"><a href="/tl/js/js_examples.html">JavaScript Example</a></h5> <h5 id="tools_quiz"><a href="/tl/js/js_quiz.html">JavaScript Quiz</a></h5> <h5 id="tools_tutorial"><a href="/tl/js/index.html">JavaScript Tutorial</a></h5> </div> <div><h3><center> Link ng Sponsor </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> Ang nilalaman na ibinibigay ng CodeW3C.com ay ginagamit lamang para sa pagsasanay at pagsusuri, at hindi nasisigurado ang katumpakan ng nilalaman. Ang panganib na magiging kalat sa paggamit ng nilalaman ng site na ito ay hindi kaugnay sa site. Karapatang pinagmulan, inaayos ang lahat ng karapatan. </p> <p id="p2"> <a href="/tl/about/index.html" title="Tungkol sa CodeW3C.com">Tungkol sa CodeW3C.com</a> <a href="/tl/about/about_helping.html" title="Tulong CodeW3C.com">Tulong CodeW3C.com</a> <a href="/tl/about/about_use.html" title="Tungkol sa Paggamit">Terms of Use</a> <a href="/tl/about/about_privacy.html" title="Tungkol sa Privacy">Privacy Terms</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="Hinihikayat ng Ce4e.com"></a> </p> </div> </div> <!-- wrapper end --> <script src="/myjs/tongji.js"></script> </body> </html>