gpt4 book ai didi

Mobile Swipe Event With jQuery(使用jQuery的移动滑动事件)

转载 作者:bug小助手 更新时间:2023-10-28 11:17:59 24 4
gpt4 key购买 nike



I am trying to add a simple left/right swipe event to an element. On swipe some jQuery should be executed. I have tried a number of scripts to achieve this but no success.

我正在尝试向元素添加一个简单的左/右滑动事件。在滑动时,应该执行一些jQuery。我已经尝试了许多脚本来实现这一点,但都没有成功。


Right now I am using this one: https://gianlucaguarini.com/Tocca.js/

现在我正在使用这个:https://gianlucaguarini.com/Tocca.js/


I can use the same code in an onclick and it works so I can't see why it doesn't work on swipe.

我可以在onClick中使用相同的代码,它可以工作,所以我不明白为什么它不能在Swipe上工作。


The issue can be reproduced using the below:

可以使用以下内容重现此问题:


<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>

<body>

<div id="test-swipe" style="background-color: red; min-height: 200px;"></div>

<a id="test-click" href="https://google.com">link</a>

<br ><br >

<a id="manual-trigger" href="https://google.com">manually trigger the click</a>

<script>
// On Swipe Left
$("#test-swipe").on('swipeleft',function (e,data){
console.log(data.x);
console.log(data.y);
console.log(data.distance.x);
console.log(data.distance.y);
$("#test-click").click();
});
</script>

<script>
// On Manual Click
$( "#manual-trigger" ).on( "click", function() {
$("#test-click").click();
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Tocca.js/2.0.9/Tocca.min.js"></script>

</body>
</html>

更多回答

Can you include the relevant HTML? Such as id=my-elment and productView-thumbnail-link (and related). Ideally in a complete snippet that demonstrates the issue. See minimal reproducible example,.

您能包括相关的HTML吗?如id=my-elment和ProductView-Thumbilletlink(和相关)。理想情况下,使用演示该问题的完整代码段。请参阅最小可重现示例。

I have updated the original question to include a reproducible example.

我已经更新了原来的问题,包括一个可重复的例子。

<a id="manual-trigger" href=' you need to cancel the default click event otherwise it just navigates to the href of manual-trigger. return false

您需要取消默认的点击事件,否则它只会导航到手动触发器的href。返回False

优秀答案推荐

First of all swipeleft is available in JQuery mobile so make sure that you're importing that library.

首先,Swipeleft在JQuery Mobile中可用,因此请确保您正在导入该库。


The other issue is with click(). The JQuery selector returns an array of elements so in order to get the one that you want you need to specify an index (0 in this case).

另一个问题是Click()。JQuery选择器返回一个元素数组,因此为了获得所需的元素,您需要指定一个索引(在本例中为0)。


This is the modified line:

以下是修改后的行:


$("#test-click")[0].click();

Demo (one can simulate left sweep by moving pointer keeping the left mouse button pressed):

演示(可以通过按住鼠标左键移动指针来模拟左扫):




// On Swipe Left
$("#test-swipe").on('swipeleft', function(e, data) {
console.log(data.x);
console.log(data.y);
console.log(data.distance.x);
console.log(data.distance.y);
$("#test-click")[0].click();
});

// On Manual Click
$("#manual-trigger").on("click", function() {
$("#test-click").click();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Tocca.js/2.0.9/Tocca.min.js"></script>

<div id="test-swipe" style="background-color: red; min-height: 200px;"></div>

<a id="test-click" href="https://google.com">link</a>

<br><br>

<a id="manual-trigger" href="https://google.com">manually trigger the click</a>




更多回答

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com