假設(shè)我有一個類似于下面的代碼（這是非常簡化的，但思想相對相同）<div> <div class="parent" ondragenter="enter()" ondragleave="leave()"> <div class="child"> Stuff </div> </div></div>我希望能夠?qū)⒘硪粋€ div 拖動到父 div 之上，并觸發(fā) ondragagenter 和 ondragleave 事件。這可行，但有一個問題。當(dāng)項目被拖入子項時，事件也會觸發(fā)。停止傳播不起作用，因為它只是在子元素所在的位置創(chuàng)建了一個“洞”，而問題仍然存在。有什么辦法可以完全不理孩子嗎？這樣我就可以將項目拖入或拖出子項，并且不會觸發(fā)任何事件；它們僅在項目進入和離開父項時才觸發(fā)？我已經(jīng)堅持這個問題一個多星期了，所以任何幫助將不勝感激。
2 回答
慕容森
TA貢獻1853條經(jīng)驗 獲得超18個贊
使用事件委托，您只需在最外層父級上設(shè)置事件處理程序并處理那里的所有事件。在處理程序中，您可以測試event.target以查看事件的源元素是什么，并且僅當(dāng)該元素是您想要的元素時才繼續(xù)。
這是一個click事件示例：
document.querySelector(".parent").addEventListener("click", function(event){
? console.log("Either the parent or the child was clicked.");
? // Only react if the source of the event was the parent, not the child.
? if(event.target.classList.contains("parent")){
? ? ?alert("you clicked on the parent");
? }
});
<div>Click on both the parent and the child. Only the parent will perform the desired action.
? ? <div class="parent">
? ? ? I'm the parent
? ? ? ? <div class="child">
? ? ? ? ? ? I'm the child
? ? ? ? </div>
? ? </div>
</div>
鴻蒙傳說
TA貢獻1865條經(jīng)驗 獲得超7個贊
最后，我解決問題的方法是完全刪除 onleave 事件。這是造成大多數(shù)問題的原因。
因此，現(xiàn)在在 onenter 上，我只是檢查 currentTarget 是否與之前訪問過的 currentTarget 不同。如果是，則禁用先前訪問的 currentTarget 的指示器，并激活新的 currentTarget 的指示器。
這實際上比我預(yù)期的要好，因為即使您離開卡但沒有輸入新卡，該指示器也會保持不變。這樣您就可以隨時跟蹤您上次輸入的位置。
- 2 回答
- 0 關(guān)注
- 147 瀏覽
添加回答
舉報
0/150
提交
取消