关闭按钮在许多 Android 设备上不起作用

Question

这是我的代码：

function setToTop(t) {
  var n = 0;
  $(".box").each(function(t, o) {
    var e = Number.parseInt($(o).css("z-index"));
    e = Number.isNaN(e) ? 0 : e, n = Math.max(n, e)
  }), t.css({
    zIndex: n + 1
  })
}
$(function() {
  $(document).mouseleave(function() {
    $(document).trigger("mouseup")
  }), $(".box").draggable({
    helper: "original",
    containment: "body",
    drag: function(t, n) {
      n.offset.left < 0 && (n.position.left = n.position.left - n.offset.left)
    },
    stop: function(t, n) {},
    start: function(t, n) {
      setToTop(n.helper)
    }
  })
}), $(".box span").click(function() {
  $(this).parents(".box").css("display", "none")
});

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  font-size: 50px;
  font-family: Arial;
  background-color: rgb(220, 220, 220);
}

.box {
  background-color: yellow;
  color: black;
  padding: 20px;
  display: block;
  position: absolute;
  border: 2px black;
  cursor: all-scroll;
  border: 1px solid black;
}

.box:nth-child(1) {
  left: 20%;
  top: 10%;
}

.box:nth-child(2) {
  left: 10%;
  top: 15%;
}

.box:nth-child(3) {
  left: 25%;
  top: 30%;
}

.box:nth-child(4) {
  left: 30%;
  top: 20%;
}

.box span {
  background-color: red;
  color: white;
  position: absolute;
  top: -40px;
  right: -40px;
  padding: 10px;
  cursor: pointer;
  border: 1px solid black;
}

<div class="box">Hello <span>✕</span></div>
<div class="box">Love <span>✕</span></div>
<div class="box">Freedom <span>✕</span></div>
<div class="box">Peace <span>✕</span></div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>

函数为：

有可拖动的框
当前拖动的框被设置在顶部
可以使用 ✕ 按钮关闭框

遗憾的是，✕ 按钮在许多触摸设备上不起作用。我的研究表明它在 Apple 设备上运行良好，但在许多 Android 设备上却很糟糕。

有没有人想解决这个问题？另外，有没有人有优化代码的想法？

非常感谢您的帮助！ <3

Answer 1

考虑以下因素。

$(function() {
  function setToTop(t) {
    var n = $(".box").length;
    $(".box").each(function(i, el) {
      if (!isNaN($(el).css("z-index"))) {
        n = parseInt($(el).css("z-index"));
      }
    });
    t.css("z-index", n + 1);
    return true;
  }

  $(document).mouseleave(function() {
    $(document).trigger("mouseup");
  });

  $(".box").draggable({
    containment: "body",
    cancel: ".btn",
    start: function(event, ui) {
      setToTop(ui.helper)
    }
  });

  $(".box .btn").click(function() {
    $(this).parents(".box").css("display", "none")
  });
});

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  font-size: 50px;
  font-family: Arial;
  background-color: rgb(220, 220, 220);
}

.box {
  background-color: yellow;
  color: black;
  padding: 20px;
  display: block;
  position: absolute;
  border: 2px black;
  cursor: all-scroll;
  border: 1px solid black;
}

.box:nth-child(1) {
  left: 20%;
  top: 10%;
}

.box:nth-child(2) {
  left: 10%;
  top: 15%;
}

.box:nth-child(3) {
  left: 25%;
  top: 30%;
}

.box:nth-child(4) {
  left: 30%;
  top: 20%;
}

.box span {
  background-color: red;
  color: white;
  position: absolute;
  top: -40px;
  right: -40px;
  padding: 10px;
  cursor: pointer;
  border: 1px solid black;
}

<div class="box">Hello <span class="btn">✕</span></div>
<div class="box">Love <span class="btn">✕</span></div>
<div class="box">Freedom <span class="btn">✕</span></div>
<div class="box">Peace <span class="btn">✕</span></div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>

cancel 方法 防止从指定元素开始拖动。

查看更多：https://api.jqueryui.com/draggable/#option-cancel

在代码中使用相同的变量名不是好的做法。

关闭按钮在许多 Android 设备上不起作用

Close button doesn't work on many Android devices

javascript

jquery

android

jquery-ui

jquery-plugins