Javascript 如何添加threshold onclick（）jQuery？

如何在滑块中的图像上添加单击阈值？问题是，如果我通过单击并拖动图片将滑块移动到另一个页面，则会选中此页面

如何添加阈值或其他内容，以便在从一张幻灯片移动到另一张幻灯片时不会选中它

第二个问题可能是：如何在不移动的情况下选择图像（因为如果我选择其中一个，则其他两个正在移动），并且我希望它们位于刷子的中心（它们与底部、顶部、左侧和右侧之间的距离相同）

我希望我使用jQuery和jQuery mobile的phonegap移动应用程序具有这种效果。我也使用swiper插件

代码如下：

HTML: JS:

---

两个问题。首先，您将得到一个边界为2.5px的舍入错误。尝试将其更改为2或3倍。其次，边框在图像周围有效地增加了2-3倍的边距，这导致图像跳跃。尝试在添加边框时消失的图像周围留一个边距。像这样：

.image {
    width:180px;
    height:180px;
    margin: 3px;
}

.selected {
    border-style: solid;
    border-color: black;
    border-width: 3px;
    margin: 0;
}

至于点击图像时不刷卡。根据Swiper API，在初始化您的Swiper时添加

noSwiping:true

，并将类

Swiper-no-swiping

添加到您不想滑动的任何元素。 我已将其添加到以下JSFIDLE中第一页的3

标记中：

如果滑动时不高亮显示/取消高亮显示，请尝试以下代码：

mySwiper.addCallback('SlideChangeStart', function(swiper){
  sliding = true;
}) ;
 mySwiper.addCallback('SlideChangeEnd', function(swiper){
  sliding = false;
}) ;

      $(".image").click(function() {          
          if(!sliding){
        if($(this).hasClass("selected"))
             $(this).removeClass("selected");
        else
             $(this).addClass("selected");
          }
     });

---

您可以检查，自从按下鼠标按钮直到释放鼠标按钮后，鼠标是否移动了一定距离，因为释放鼠标按钮后会触发单击事件。当移动距离太大时，取消选择。 您可以将鼠标的起始位置存储在一个变量中，并在单击事件中检查它

$(".image").click(function() {
   if(distancetravelled>treshhold)
   {
       if($(this).hasClass("selected"))
            $(this).removeClass("selected");
       else
            $(this).addClass("selected");
   }
 });
$(".image").onmousedown(function()
{
   startposition = currentMousePos
});

---

但我最大的问题是，如果我通过单击并拖动图片将滑块从一个页面移动到另一个页面，那么这个页面就会被选中！我如何添加一个treshhold或其他内容，以便在从一张幻灯片移动到另一张幻灯片时不会选中它？已更新我的答案，以包含该问题的解决方案。抱歉。。但是你没有完全理解我。。。我确实希望当我从图像中单击和滑动时，滑动器滑动。我不希望它被选中！好的，尝试第三种解决方案。我使用以下思路解决了它：mysweer.addCallback（'TouchStart'，function（swiper）{allowSelect=true；}）；addCallback（'TouchMove'，函数（swiper）{allowSelect=false；}）；addCallback（'TouchEnd'，函数（swiper）{setTiemout（函数（）{allowSelect=true；}，100）}）；

.image {
    width:180px;
    height:180px;
    margin: 3px;
}

.selected {
    border-style: solid;
    border-color: black;
    border-width: 3px;
    margin: 0;
}

mySwiper.addCallback('SlideChangeStart', function(swiper){
  sliding = true;
}) ;
 mySwiper.addCallback('SlideChangeEnd', function(swiper){
  sliding = false;
}) ;

      $(".image").click(function() {          
          if(!sliding){
        if($(this).hasClass("selected"))
             $(this).removeClass("selected");
        else
             $(this).addClass("selected");
          }
     });

$(".image").click(function() {
   if(distancetravelled>treshhold)
   {
       if($(this).hasClass("selected"))
            $(this).removeClass("selected");
       else
            $(this).addClass("selected");
   }
 });
$(".image").onmousedown(function()
{
   startposition = currentMousePos
});