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>
更多回答
我是一名优秀的程序员,十分优秀!