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

现在我用的是这个:https://gianlucaguarini.com/Tocca.js/

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

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

<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>

推荐答案

首先,JQuery Mobile中有swipeleft个可用的库,因此请确保您正在导入该库.

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

以下是修改后的行:

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

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

// 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>

Javascript相关问答推荐

创建1:1比例元素,以另一个元素为中心

JS生成具有给定数字和幻灯片计数的数组子集

GrapeJS -如何保存和加载自定义页面

我开始使用/url?q=使用Cheerio

给定一个凸多边形作为一组边,如何根据到最近边的距离填充里面的区域

从Node JS将对象数组中的数据插入Postgres表

实现JS代码更改CSS元素

Websocket错误—有一个或多个保留位开启:reserved1 = 1,reserved2 = 0,reserved3 = 0

在浏览器中触发插入事件时检索编码值的能力

Web Crypto API解密失败,RSA-OAEP

在Matter.js中添加从点A到另一个约束的约束

如何在Svelte中从一个codec函数中调用error()?

如何在Node.js中排除导出的JS文件

为什么客户端没有收到来自服务器的响应消息?

钛中的onClick事件需要在两次点击之间等待几秒钟

使用Ace编辑器对子组件实例的native-element 进行Angular 获取时面临的问题

每次重新呈现时调用useState initialValue函数

react 路由DOM有条件地呈现元素

在HTML5画布上下文中使用putImageData时,重载解析失败

ComponentWillReceiveProps仍在React 18.2.0中工作