HTML中setCapture、releaseCapture 使用方法淺析

更新時間：2016年09月25日 10:11:00 作者：卷柏的花期

本文給大家簡單介紹了下html中的高級拖動技術(shù)setCapture、releaseCapture的使用方法，有需要的小伙伴可以參考下

1. setCapture 簡介

setCapture可以將鼠標(biāo)事件鎖定在指定的元素上，當(dāng)元素捕獲了鼠標(biāo)事件后，該事件只能作用在當(dāng)前元素上。

以下情況會導(dǎo)致事件鎖定失?。?/p>

當(dāng)窗口失去焦點(diǎn)時，鎖定的事件，自動就會取消。
alert也會導(dǎo)致事件的鎖定取消。解決辦法是在alert之后再次鎖定。
鼠標(biāo)右鍵也會導(dǎo)致事件解鎖。

setCapture只可以作用于以下事件：

onclick
ondblclick
onmousedown
onmouseup
onmouseover
onmouseout

setCapture不可作用于鍵盤等其它事件，只能作用于鼠標(biāo)事件。主要用于: onmouseover 與 onmouseout 事件。

* setCapture該法是IE瀏覽器專有。

2. setCapture 使用格式

setCapture 有一個布爾值參數(shù)，用于設(shè)置是否捕獲其子元素的鼠標(biāo)事件。

　　當(dāng)參數(shù)是ture時，當(dāng)前元素會捕獲其內(nèi)的所有子元素的鼠標(biāo)事件，即指定元素內(nèi)的子元素不會觸發(fā)鼠標(biāo)事件，也就是當(dāng)前元素內(nèi)的子元素與當(dāng)前元素外的元素一致。
　　當(dāng)參數(shù)為false時，當(dāng)前元素不會捕獲該其內(nèi)的所有子元素的鼠標(biāo)事件。容器內(nèi)的對象能夠正常地觸發(fā)事件和取消冒泡。

示例： currElement.setCapture(boolean)

3. setCapture - Simple - Demo

<script>
 var oBox = document.getElementById('infor'),
  oBtn = document.getElementsByTagName('button')[0];

 oBtn.onmousedown=function(){
  this.setCapture(true);
 }
 oBtn.onmouseover = function(){
 oBox.innerHTML+='onmouseover | ';
 }
 oBtn.onmouseout = function(){
 oBox.innerHTML+='onmouseout | ';
 }
 oBtn.onmouseup = function(){
 oBox.innerHTML+='onmouseup | ';
 }

</script>

4. setCapture 總結(jié)

setCapture()用于事件的鎖定，對應(yīng)的還有一個解鎖事件方法 releaseCapture()方法，releaseCapture()可以為指定的元素解除事件鎖定。它們倆必須成對使用。

setCapture()方法主要用于高級的拖動技術(shù)，這是因?yàn)樵贗E下，當(dāng)我們在要拖動的元素上，在按下鼠標(biāo)按鈕然后拖動時，當(dāng)拖動過快，或者是超出瀏覽器的文檔窗口時，拖動對象身上的onmousedown就會失效。在Chrome我們可以為doucment綁定onmouseout來判斷是否發(fā)生這樣的情況，但是IE下面卻行不通，所以最好的解決辦法就時為要拖動的元素對象鎖定鼠標(biāo)事件，在拖動后在解除事件鎖定。

具體使用案例：http://www.dbjr.com.cn/article/93446.htm

另外在Firefox中有相似的功能，它們分別是：

· captureEvents(Event.eventType)
· releaseEvents(Event.eventType)

最后在學(xué)習(xí)的過程中我對setCapture還存在的幾個疑問，希望以后能得到高手的指點(diǎn)：

　　1. 為什么為button元素鎖定事件后，沒有在button元素上移動，但是還會觸發(fā)onmouseover與onmouseout事件。

　　　　[ 具體代碼見上面的DEMO ]

　　2.在onclick事件中，沒法永久將鼠標(biāo)事件鎖定在指定元素上。

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>setCapture - Simple - Demo</title>
 </head>
 <body>
  <button>click</button>
 </body>
</html>
 <script>
 var oBtn = document.getElementsByTagName('button')[0];
 oBtn.onclick=function(){
  this.setCapture();
 }
 </script>

　　然后第二次點(diǎn)擊頁面后就會發(fā)現(xiàn)鎖定自動取消。

您可能感興趣的文章: