HTML5在悬浮子元素时触发dragleave

我遇到的问题是，一个元素的dragleave事件是在悬停该元素的子元素时触发的。同样，当再次悬停回父元素时，dragenter不会被触发。

我做了一个简化的小提琴:http://jsfiddle.net/pimvdb/HU6Mk/1/。

HTML:

<div id="drag" draggable="true">drag me</div>

<hr>

<div id="drop">
    drop here
    <p>child</p>
    parent
</div>

使用以下JavaScript:

$('#drop').bind({
                 dragenter: function() {
                     $(this).addClass('red');
                 },

                 dragleave: function() {
                     $(this).removeClass('red');
                 }
                });

$('#drag').bind({
                 dragstart: function(e) {
                     e.allowedEffect = "copy";
                     e.setData("text/plain", "test");
                 }
                });

它应该做的是，当拖拽一些东西时，通过将drop div设置为红色来通知用户。这是可行的，但是如果你拖动到p子元素中，拖动键就会触发，div就不再是红色了。移动回下拉div也不会使它再次变红。有必要完全移出拖放div，并再次拖回它，使其变为红色。

是否有可能阻止dragleave在拖动到子元素时发射?

2017年更新:TL;DR，查找CSS指针事件:无;如@ h.d.所述。在现代浏览器和IE11中都能运行。

当前回答

   private onDragLeave(e) {
     e.preventDefault();
     e.stopPropagation();

    if (this.isEventFromChild(e)) {
      return;
    }

    this.isDragOver = false;
  }
  
  private isEventFromChild(e): boolean {
    //relatedTarget is null on Safari, so we take it from coordinates
    const relatedTarget = e.relatedTarget || document.elementFromPoint(e.clientX, e.clientY);
    return e.currentTarget.contains(relatedTarget);
  }

2023-02-02 12:25:14

其他回答

问题是当鼠标移动到子元素前面时，dragleave事件被触发。

我已经尝试了各种方法来检查e.target元素是否与this元素相同，但没有任何改进。

我修复这个问题的方式有点hack，但工作100%。

dragleave: function(e) {
               // Get the location on screen of the element.
               var rect = this.getBoundingClientRect();

               // Check the mouseEvent coordinates are outside of the rectangle
               if(e.x > rect.left + rect.width || e.x < rect.left
               || e.y > rect.top + rect.height || e.y < rect.top) {
                   $(this).removeClass('red');
               }
           }

2012-07-18 19:26:13

你只需要保留一个引用计数器，当你得到dragenter时增加它，当你得到dragleave时减少它。当计数器为0时-删除类。

var counter = 0;

$('#drop').bind({
    dragenter: function(ev) {
        ev.preventDefault(); // needed for IE
        counter++;
        $(this).addClass('red');
    },

    dragleave: function() {
        counter--;
        if (counter === 0) { 
            $(this).removeClass('red');
        }
    }
});

注意:在drop事件中，将计数器重置为零，并清除添加的类。

你可以在这里运行它

2014-01-08 17:30:55

接受的答案在某些情况下可能有效，但如果您有多个重叠的子元素，它将很快崩溃。

根据您的用例，本文的顶部答案可能更简单、更清晰

当拖动子元素时，父元素的'dragleave'会触发

2021-08-10 15:41:41

到目前为止，这个相当简单的解决方案对我来说是有效的，假设您的事件分别附加到每个拖动元素。

if (evt.currentTarget.contains(evt.relatedTarget)) {
  return;
}

2019-01-19 20:35:12

在花了这么多小时后，我得到的建议完全按照预期工作。我只想在文件被拖拽时提供提示，而文档拖拽，拖拽会在Chrome浏览器上引起痛苦的闪烁。

这就是我解决它的方法，也为用户提供了适当的提示。

$(document).on('dragstart dragenter dragover', function(event) {    
    // Only file drag-n-drops allowed, http://jsfiddle.net/guYWx/16/
    if ($.inArray('Files', event.originalEvent.dataTransfer.types) > -1) {
        // Needed to allow effectAllowed, dropEffect to take effect
        event.stopPropagation();
        // Needed to allow effectAllowed, dropEffect to take effect
        event.preventDefault();

        $('.dropzone').addClass('dropzone-hilight').show();     // Hilight the drop zone
        dropZoneVisible= true;

        // http://www.html5rocks.com/en/tutorials/dnd/basics/
        // http://api.jquery.com/category/events/event-object/
        event.originalEvent.dataTransfer.effectAllowed= 'none';
        event.originalEvent.dataTransfer.dropEffect= 'none';

         // .dropzone .message
        if($(event.target).hasClass('dropzone') || $(event.target).hasClass('message')) {
            event.originalEvent.dataTransfer.effectAllowed= 'copyMove';
            event.originalEvent.dataTransfer.dropEffect= 'move';
        } 
    }
}).on('drop dragleave dragend', function (event) {  
    dropZoneVisible= false;

    clearTimeout(dropZoneTimer);
    dropZoneTimer= setTimeout( function(){
        if( !dropZoneVisible ) {
            $('.dropzone').hide().removeClass('dropzone-hilight'); 
        }
    }, dropZoneHideDelay); // dropZoneHideDelay= 70, but anything above 50 is better
});

2013-07-03 15:12:13

HTML5在悬浮子元素时触发dragleave

推荐文章

最新文章

标签