HTML中setCapture、releaseCapture 使用方法淺析

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

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

1. setCapture 簡(jiǎn)介

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

以下情況會(huì)導(dǎo)致事件鎖定失敗：

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

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

onclick
ondblclick
onmousedown
onmouseup
onmouseover
onmouseout

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

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

2. setCapture 使用格式

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

　　當(dāng)參數(shù)是ture時(shí) ，當(dāng)前元素會(huì)捕獲其內(nèi)的所有子元素的鼠標(biāo)事件，即指定元素內(nèi)的子元素不會(huì)觸發(fā)鼠標(biāo)事件，也就是當(dāng)前元素內(nèi)的子元素與當(dāng)前元素外的元素一致。
　　當(dāng)參數(shù)為false時(shí)，當(dāng)前元素不會(huì)捕獲該其內(nèi)的所有子元素的鼠標(biāo)事件。容器內(nèi)的對(duì)象能夠正常地觸發(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()用于事件的鎖定，對(duì)應(yīng)的還有一個(gè)解鎖事件方法 releaseCapture()方法，releaseCapture()可以為指定的元素解除事件鎖定。它們倆必須成對(duì)使用。

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

具體使用案例：http://chabaoo.cn/article/93446.htm

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

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

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

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

　　　　[ 具體代碼見(jiàn)上面的DEMO ]

　　2.在onclick事件中，沒(méi)法永久將鼠標(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)擊頁(yè)面后就會(huì)發(fā)現(xiàn)鎖定自動(dòng)取消。

您可能感興趣的文章: