html5：是否有一种方法来防止儿童干扰拖拽事件 [英] html5: is there a way to prevent children interfering with drag events

问题描述

我有一个问题， html5 拖放。我没有看到一个简单的方法。基本上我有一些盒子与其他一些html元素里面。父框是可拖动的，它们可以相互丢弃。

I'm having a bit of a problem with html5 drag and drop. I don't see an easy way out of it. Basically i have some "boxes" with some other html elements inside. The parent boxes are draggable and they can be dropped on each other.

我将身体上的 dragover 事件绑定到在整个页面上处理拖放。问题是，当你拖动框 - 事件有时被触发的子元素，父母根本没有得到这个事件。

I bind dragover event on the body to handle drag-drop on the entire page. Problem is, when you drag over the boxes - the event is sometimes triggered on child elements and the parent doesn't get this event at all.

有一个简单的方法防止这种情况发生？

Is there an easy way to prevent this from happening?

基本上，我希望拖动事件在鼠标位于目标框的区域时立即触发。我知道解决这个问题的几个方法，但是他们真的很丑陋，我想知道是否有一些简单的东西。

Basically i want the dragover event to fire as soon as the mouse is in the area of the target box. I know of a couple of ways of solving this, but they're really ugly and i was wondering if there maybe is something simple.

感谢你的想法

我在代码中的简短版本：

Short version of what i'm doing in code:

document.addEventListener('dragenter', function(e) {

    if (e.target.className == 'candrophere')
        // cancel out "e" to allow drop


}, false);

但在我的情况下，子元素几乎占据了整个.candrophere框，所以事件几乎从来没有对正确的目标（特别是当我移动鼠标更快）时触发。

But in my case the child elements are taking up almost the entire '.candrophere' box so the event is almost never fired on the correct target (especially when i move the mouse faster)

推荐答案

css 指针事件规则阻止鼠标交互事件触发应用到的元素，但目前不受IE支持（ http://caniuse.com/pointer-events ）。

The css pointer-events rule prevents mouse interaction events from firing on the elements it is applied to, but isn't currently supported by IE (http://caniuse.com/pointer-events).

我用于此问题的解决方法是添加类似于

A workaround I've used for this problem is to add something like

.is-drag-in-progress .child-elements
{
    pointer-events:none;
}

到您的CSS，并添加 is-drag在 onDragStart 处理程序（并将其删除）中的类到正文元素当拖曳结束时）。这将阻止子元素干扰父元素上的拖动事件。

to your CSS, and add the is-drag-in-progress class to the body element in your onDragStart handler (and remove it when the drag ends). This will prevent the child elements from interfering with drag events on the parent element.

这篇关于html5：是否有一种方法来防止儿童干扰拖拽事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！