Javascript 当html中没有发生删除操作时，会触发哪个事件？

我想在我的删除操作失败时捕获事件，原因可能是用户没有在正确的位置删除，也可能是他自己通过按“Esc”键取消了删除操作。

查看此脚本。我花了一些时间来写和完成它。=>

如果这是你想要的，让我知道

注意：=>此代码与不支持HTML5的传统浏览器（如IE8等）不兼容

首先，我们通过将draggable属性设置为true来定义draggable元素

拖动这个div

然后我们定义我们的dropzone目标：元素应该放在哪里

下降区

我们需要得到释放元素时鼠标的坐标，这样我们就知道鼠标是否在dropzone上释放了。我已经发布了一个警报通知，显示dragend事件是否发生在dropzone上。如果在dropzone上，则它将在dropzone上发出警报，否则它将不在dropzone上发出警报

功能录像机

我们还需要获得dropzone元素的坐标，这样我们就能够找到drop事件成功与否*手动取消Esc或在错误的位置发生drop

var elTop=dragZone.getBoundingClientRect.top+getDocTopLeftPos.fT

var elLeft=dragZone.getBoundingClientRect.left

var elBottom=elTop+parseIntgetElPropsdragZone，'height'

var elRight=elLeft+parseIntgetElPropsdragZone，“宽度”

我们将通过ondragend事件知道拖动操作是否成功

HTML

Javascript

---

昂德拉根事件呢？当拖动操作完成时，无论是否成功，拖动源都将收到一个dragend事件。将文件从操作系统拖动到浏览器中时不会触发此事件。有关详细信息，请参见完成拖动。->dragend即使成功掉落也会被触发。我不想在这里捕获成功的拖放事件，而只想捕获失败的拖放事件。您可以检查拖放事件是否发生在目标上，如果没有发生，则检查它是否被拖放到其他位置。这将是“不成功”的下降。听起来技术上是正确的。。谢谢您好，我在执行此操作时遇到了另一个问题。在我的情况下，我的目标怎么会知道投掷事件的威力？Drop事件是拖放系列中的最后一个事件。在dragend被发射后，我的目标如何知道未来的事件（如drop事件）是否会被发射？我应该把检查/验证放在哪里？

  <div id="draggable" draggable="true">
   Drag this div
  </div>

  <div class="dropzone" id="dropzone">Dropzone</div>

  #draggable {

    width: 200px;
    height: 50px;
    text-align: center;
    background: red;
    margin-bottom:50px;

  }

  .dropzone {

    width: 200px;
    height: 200px;
    background: brown;
    margin-bottom: 10px;
    padding: 10px;
    text-align:center

  }

//checking if the browser is Internet Explorer    
var isIEX = navigator.userAgent.match(/Trident/);

var doc = isIEX ? document.documentElement : document.body;

function getDocTopLeftPos() {

    scrollTop = window.pageYOffset || doc.scrollTop;
    scrollLeft = window.pageXOffset || doc.scrollLeft;

    clientTop = doc.clientTop || 0;
    clientLeft = doc.clientLeft || 0;

    fromTop  = Math.round(scrollTop - clientTop);
    fromLeft = Math.round(scrollLeft - clientLeft);

    return {fT:fromTop, fL:fromLeft}    

    }

//get the value of the property of the specified element
function getElProps(el,attr){

whaT_ = isIEX ? el.currentStyle : window.getComputedStyle(el);

getWhaT_ =  isIEX ? whaT_.getAttribute(attr) : whaT_.getPropertyValue(attr);

    return getWhaT_;

}

//getting the coordinates of the mouse 
function cords(ev) {

    if (ev.pageX == null && ev.clientX != null ) { 

    var html = document.documentElement;
    var body = document.body;
    ev.pageX = ev.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
    ev.pageY = ev.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)

    }

    return {x:ev.pageX,y:ev.pageY}

}

var x,y;

var dragZone = document.getElementById("dropzone");

//getting our element's coordinates
//the mouse should be between these coordinates, otherwise that wouldn't be the dropzone

//from top
var elTop = dragZone.getBoundingClientRect().top + getDocTopLeftPos().fT;
//from left
var elLeft = dragZone.getBoundingClientRect().left;
//the height of the draggable element + its top coordinate
var elBottom = elTop + parseInt(getElProps(dragZone,'height'));
//the width of the draggable element + its left coordinate
var elRight = elLeft + parseInt(getElProps(dragZone,'width'));

    var dragElement;

    document.getElementById("draggable").addEventListener("dragstart",function(event){

        evt = event || window.event;

        if(navigator.userAgent.match(/Firefox/)) event.dataTransfer.setData('text/plain',null)

    },false);

    document.addEventListener("dragstart",function(event){

        evt = event || window.event;

        //the element that is being dragged
        dragElement = evt.target || evt.srcElement

        //make our target half transparent;
        dragElement.style.opacity = 0.5;

    },false);

    document.addEventListener("dragend",function(event){

        console.log(x + ' ' + y + ' ' + elTop + ' ' + elLeft + ' ' + elBottom + ' ' + elRight);

        //if the dragged element was dropped at the right place
        if(x>elLeft && x<elRight && y>elTop && y<elBottom){

            alert('dropped on the dropzone');

            }else{

            //if the destination was wrong or the drag was cancelled (Esc)

            alert('dropped not on the dropzone')

            } 

            //reset our element's  transparency
            dragElement.style.opacity = 1;
            dragZone.style.background = "brown";

    },false);


    document.addEventListener("dragover",function(event){

        evt = event || window.event;

        x = cords(evt).x;
        y = cords(evt).y;

        console.log(x + ' ' + y);

        //this will prevent browser's default behaviour which will allow the drop event to occur

        if(evt.preventDefault) evt.preventDefault() ; else return false;

    },false);

    document.addEventListener("dragenter",function(event){

        evt = event || window.event;

        dropTarget = evt.target || evt.srcElement;

        //this will highlight potential drop target when the draggable element enters it

        if(dropTarget.className == "dropzone" ){

          dropTarget.style.background = "purple";

          }

    }, false);

    document.addEventListener("drop",function(event){

        evt = event || window.event;

        if(evt.preventDefault) evt.preventDefault() ; else return false;

    }, false);