Question

我正在创建一个画廊网络应用程序，只是为了好玩。我正在添加上下文菜单来处理图像。我添加了通过右键单击删除特定图像的功能，但是当右键单击多个图像并单击一次删除选项时，所有先前单击的图像也会被删除。

删除选项应仅删除最近单击的图像。

$(".image").on("mousedown", function(event) {
  var i = $(this);
  var c = $(".context");
  c.css("display", "none");

  if (event.which == 3) {
    c.css({
      "top": event.pageY + "px",
      "left": event.pageX + "px"
    }).slideDown();

    $("#delete").on("click", function() {
      var p = i.offset();
      i.next().css("margin-left", "290px");
      i.css({
        "position": "absolute",
        "top": p.top - 72,
        "left": p.left - 10
      });

      i.animate({
        top: "-50%",
        opacity: "0"
      });

      setTimeout(function() {
        i.next().animate({
          "marginLeft": "10px"
        });
        i.prev().animate({
          "marginRight": "10px"
        });
        i.remove();
      }, 200);

      c.css("display", "none");
    });
  } else if (event.which == 1 || event.which == 2) {
    c.css("display", "none");
  }
});

Answer 1

这是因为.on将click事件处理程序附加到删除按钮上，而不覆盖上一个事件。

因此，每次右键单击（我相信右键单击都是contextmenu事件），它将添加到附加的事件上。

按Delete键时，将触发所有附加事件。

您需要使用.click（）或.unbind（'click'），才能首先取消绑定上一个事件。

Answer 2

第4行：我认为应该删除它，因为它在所有情况下都会添加css attrs {display:none}。

$(".image").on("mousedown", function(event) {
  var i = $(this);
  var c = $(".context");
  // c.css("display", "none"); //should be removed
 //....
 });

Answer 3

假设所有图像都使用了相同的上下文菜单，则删除多个图像的原因是因为您的代码向共享的#delete按钮添加了多个事件。

此问题的一种解决方案是在#delete事件之外添加一次mousedown的事件。然后，在mousedown事件中，使用CSS类标记图像并将其定位到#delete事件处理程序中。

示例：

    $(".image").on("mousedown", function(event) {
      var i = $(this);
      var c = $(".context");
      c.css("display", "none");

      // Deselect any previously selceted images
      $('.image.selected').removeClass('selected');

      if (event.which == 3) {
        c.css({
          "top": event.pageY + "px",
          "left": event.pageX + "px"
        }).slideDown();

        // Tags the image with the `selected` class
        i.addClass('selected');

      } else if (event.which == 1 || event.which == 2) {
        c.css("display", "none");
      }
    });

    $("#delete").on("click", function() {
          // Target selected image
          var i = $('.image.selected');
          var c = $(".context");
          var p = i.offset();
          i.next().css("margin-left", "290px");
          i.css({
            "position": "absolute",
            "top": p.top - 72,
            "left": p.left - 10
          });

          i.animate({
            top: "-50%",
            opacity: "0"
          });

          setTimeout(function() {
            i.next().animate({
              "marginLeft": "10px"
            });
            i.prev().animate({
              "marginRight": "10px"
            });
            i.remove();
          }, 200);

          c.css("display", "none");
        });

remove（）函数将删除我单击的每个元素，而不是最近单击的元素。

3 个答案: