Question

我想使用removeAttr()和remove()删除<div>，但似乎无效。因为我有$（'＃div1'）。removeAttr（'style'）。remove（）;在javascript的最后一行中，<div>只会出现一下吗？我不确定javascript是事件驱动编程还是自上而下编程？或者取决于代码。

我想这样做，因为我想在每次拖动新<div>之前删除并清除<div>，并且我尝试将该行代码放在任何地方，它不起作用

我不是计算机科学专业，请原谅我的无知。但我不明白为什么最后一行不执行？如果你能提供帮助，我将非常感激。非常感谢你。

我的代码：

$(document).ready(function() {
  var dragging = false;
  var clickedX, clickedY;

  // right click event
  $("#displayWindow").mousedown(function(e) {
    // when the mouse is pressed, the div is appended to the displayWindow
    if (e.button == 2) {
      // append the div start at the location that we click
      $("#displayWindow").append("<div id='div1'></div>");
      // get the coordinate where we clicked and set the div begin with that position
      clickedX = e.pageX;
      clickedY = e.pageY;
      $('#div1').css({
        top: clickedY,
        left: clickedX
      });
      dragging = true;
      return false;
    }
  });

  // holding on the mouse button, change the size of the div
  $("#displayWindow").on("mousemove", function(e) {
    if (dragging) {
      var mouseOnX = e.pageX;
      var mouseOnY = e.pageY;
      // allow user drag the selection box in 4 different direction
      $('#div1').css({
        top: Math.min(clickedY, mouseOnY),
        left: Math.min(clickedX, mouseOnX),
        height: Math.abs(mouseOnY - clickedY),
        width: Math.abs(mouseOnX - clickedX)
      });
    }
  }); // end on

  $(document).on("mouseup", function(e) {
    dragging = false;
  });

  // when clicked again, the menu fade out, and the div disappear
  $(document).click(function(e) {
    if (e.button == 0) {
      // remove the selection box div
      $('#div1').remove();
    }
  });

  // prevent the default contextmenu on the display window
  document.getElementById('displayWindow').oncontextmenu = function() {
    return false;
  };
}); // end ready

	#displayWindow {
	  background-color: white;
	  border: 1px solid;
	  height: 600px;
	  width: 800px;
	}
	#div1 {
	  background-color: lightgreen;
	  position: absolute;
	  opacity: 0.3;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="displayWindow">
  <svg height="130" width="150" style="position:absolute; left:200; top:200;" class="ui-widget-content">
    <text fill="black" x=75 y=75 style="text-anchor: middle">1</text>
    <path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z" / fill="none" stroke="blue">
  </svg>
</div>

Answer 1

您遇到的问题不在于删除。问题是：

您可以向mousemove事件添加事件处理程序，每次时右键单击。这个不对。您只需要绑定mousemove处理程序一次，因此请将该代码移到mousemove事件处理程序之外。因此，还要在clickedX函数级别声明clickedY和ready个变量;
mousemove事件不提供有关按下按钮的信息，因此e.button将始终为0。相反，您应该跟踪是否使用变量按下鼠标按钮，并在检测到文档上的mouseup事件时重置该变量。这不完美，但可能还不错;

其他一些说明：

您添加的div没有style属性，因此无法执行removeAttr('style')。但是，remove()有效;
您可以通过传递带键/值对的对象，在一个css调用中更改多个css()样式。
从事件处理程序返回true没有用处。
虽然您在评论中提到用户可以在所有4个方向上拖动，但您只允许框在一个象限中移动。您可以结合Math.min和Math.abs来电支持4个方向。

以下是一些改编的代码：

＆＃13;

$(document).ready(function() {
    var dragging = false;
    var clickedX, clickedY;
    // right click event
    $("#displayWindow").mousedown(function(e) {
        // when the mouse is pressed, the div is appended to the displayWindow
        if (e.button == 2) {
            $('#div1').remove(); // remove div that might still be there.
            // append the div start at the location that we click
            $("#displayWindow").append("<div id='div1'></div>");
            // get the coordinate where we clicked and set the div begin with that position
            clickedX = e.pageX;
            clickedY = e.pageY;
            $('#div1').css({top: clickedY, left: clickedX});
            dragging = true;
            return false;
        }
    });

    // holding on the mouse button, change the size of the div
    $("#displayWindow").on("mousemove", function(e) {
        if (dragging) {
            var mouseOnX = e.pageX;
            var mouseOnY = e.pageY;
            // allow user to drag the selection box in 4 different directions
            $('#div1').css({
                top: Math.min(clickedY, mouseOnY), 
                left: Math.min(clickedX, mouseOnX),
                height: Math.abs(mouseOnY - clickedY), 
                width: Math.abs(mouseOnX - clickedX)
            });
        }
    }); 

    $(document).on("mouseup", function(e) {
        dragging = false;
    });
    
    // when clicked the div disappears
    $(document).click(function(e) {
        if (e.button == 0) {
            // remove the selection box div
            $('#div1').remove();
        }
    });

    // prevent the default contextmenu on the display window
    document.getElementById('displayWindow').oncontextmenu = function() {
        return false;
    };

    $('#div1').remove();
}); // end ready

＆＃13;

	#displayWindow {
	  background-color: white;
	  border: 1px solid;
	  height: 600px;
	  width: 800px;
	}
	#div1 {
	  background-color: lightgreen;
	  position: absolute;
	  opacity: 0.3;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="displayWindow">
  <svg height="130" width="150" style="position:absolute; left:200; top:200;" class="ui-widget-content">
    <text fill="black" x=75 y=75 style="text-anchor: middle">1</text>
    <path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z" / fill="none" stroke="blue">
  </svg>
</div>

＆＃13;

removeAttr（）和remove（）不起作用

1 个答案: