首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何避免jQuery UI可拖动也触发click事件

为了避免jQuery UI可拖动也触发click事件,可以采取以下方法:

  1. 使用jQuery UI的draggable插件的cancel选项。将cancel选项设置为可拖动元素内部的某个元素或选择器,这样点击该元素时就不会触发click事件。例如:
代码语言:javascript
复制
$("#draggable").draggable({
  cancel: ".no-click"
});

在上述代码中,.no-click是可拖动元素内部的一个元素,点击该元素时不会触发click事件。

  1. 使用jQuery的event.stopPropagation()方法。在可拖动元素的click事件处理函数中调用event.stopPropagation()方法,阻止事件冒泡到父元素,从而避免触发父元素的click事件。例如:
代码语言:javascript
复制
$("#draggable").on("click", function(event) {
  event.stopPropagation();
});

在上述代码中,点击可拖动元素时,click事件不会冒泡到父元素。

  1. 使用jQuery的event.preventDefault()方法。在可拖动元素的mousedown事件处理函数中调用event.preventDefault()方法,阻止默认的mousedown行为,从而避免触发click事件。例如:
代码语言:javascript
复制
$("#draggable").on("mousedown", function(event) {
  event.preventDefault();
});

在上述代码中,点击可拖动元素时,不会触发默认的mousedown行为,进而避免了click事件的触发。

以上是避免jQuery UI可拖动也触发click事件的几种常见方法。根据具体情况选择适合的方法来解决该问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jQuery (二)

; // 触发没有命名空间的单击处理程序 或者如下 // 单击一将会触发二上的事件 $('#button1').click((e) => {$('#button2').trigger('button2'...)}); // 触发事件时,将会添加额外的属性给事件对象,如果事件以前被监听,将会被直接触发 $('#button1').trigger({ type:'click', synthetic:true }...实时事件 实时事件为,如果先前将所有a元素绑定了一个事件,接着在创建一个新的a的节点,如果此时触发事件,则新创建的a元素不会被触发事件,因为绑定的不是实时的事件。...{ return e.draggable === true; } 使用 $('img:draggable'); 等价于 $('img[draggable=true]') 上方封装的一个选择器为拖动的元素...//travis-ci.org/jquery/jquery-ui/builds/238029516?

9.3K30
  • Vue.js 组件编码规范

    请保证组件独立的运行。比较好的做法是增加一个单独的 demo 示例。...* 通过 props 将值传递给子组件 * 通过 props 传递回调函数给子组件来达到调用父组件方法的目的 * 通过在子组件触发事件来通知父组件 谨慎使用this....如何使用 range-slider支持如下的自定义属性:attribute type description min Number 拖动的最小值. max Number 拖动的最大值. values...component.updateInputs = (values, HANDLE) => { const value = values[HANDLE]; } . on-end Function optional 当用户停止拖动触发的回调函数...如需要自定义 slider 的样式参考 noUiSlider 文档 提供组件demo 添加 index.html 文件作为组件的 demo 示例,并提供不同配置情况的效果,说明组件是如何使用的 WHY

    16.1K20

    移动端app开发问题及理解

    事件有点不同 web端事件有 onload 页面中所有标签,文档,图片等资源加载完毕后触发 onclick 鼠标单击事件 ondbclick 鼠标双击事件 onmousedown 鼠标按下...ondrag 元素被拖动时运行的脚本 ondragend 在拖动操作末端运行的脚本 ondragenter 当元素已被拖动到有效拖放区域是运行的脚本 ondragleave 元素离开有效拖放目标时运行的脚本...onscroll 元素滚动条被滚动时 移动端事件click 单击事件 类似于pc端click,移动端中,连续click触发有200ms-300ms的延迟 touch 触摸类事件 touchstart...touch行为触发 tap触碰类事件 一般用于代替click事件 tap 手指碰一下屏幕触发 longTap 手指长按屏幕触发 singleTap 手指碰一下屏幕触发 doubleTap 手指双击屏幕触发...js如何与app端交互 具体可看下这个 https://zhuanlan.zhihu.com/p/337890794 我的理解 首先了解下 app移动端网页运行在手机应用内嵌的浏览器引擎中,没有UI

    3.8K10

    基于RequireJS和JQuery的模块化编程——常见问题解析

    那么如果避免不了该怎么办呢?...$('#test').html('test'); }); 如何在requirejs中使用jquery插件 对于jquery的插件,比较常见的做法都是传入一个jquery的对象,在这个jquery对象的基础上添加插件对应的方法...requirejs使用jquery-ui的问题 由于requirejs加载js文件后会立即执行,如果你的jquery ui 插件需要刷新DOM页面,那么可能会导致页面的事件失效。...比如,你的模块在加载后,对页面的某个元素$('#test')绑定了click事件。但是使用了某个UI插件,这个插件会重新渲染DOM元素,test对应的click事件就失效了。...解决办法: 把事件绑定推迟到DOM元素渲染完后再手动触发绑定; 可以使用事件捕获代替DOM元素的事件绑定(太麻烦了...不推荐)。

    2.9K100

    Vue.js 组件编码规范

    请保证组件独立的运行。比较好的做法是增加一个单独的 demo 示例。...开发者可以随意给事件命名,即使是原生事件的名字,这样会带来迷惑性。 过于宽松的事件命名可能与 DOM 模板不兼容。 怎么做? 事件使用连字符命名。...通过在子组件触发事件来通知父组件。 谨慎使用 this.$refs Vue.js 支持通过 ref 属性来访问其它组件和 HTML 元素。并通过 this....如何使用 支持如下的自定义属性: attribute type description min Number 拖动的最小值. max Number 拖动的最大值. values...component.updateInputs = (values, HANDLE) => { const value = values[HANDLE]; }. on-end Function optional 当用户停止拖动触发的回调函数

    6.4K20

    Touch事件实现View拖动

    注意: onTouch和onClick事件冲突问题:   当同时实现了Touch和Click事件时,会发生冲突,如何避免?在我们的onTouchListener的监听方法会返回一个boolean。...当它为false时,就会触发Click事件,当它为true时,便不会触发。我们希望在点击的时候触发点击事件,在拖动的时候实现移动效果的Touch事件。   ...这样做会出现很难触发点击事件拖动事件太容易触发。所以我们需要加点限制。在ACTION_MOVE中我们获得X、Y移动的距离。那么我们判断当期中一个的移动距离大于1的时,才执行key=true。...不过需要在UI控件全部加载完成之后才能调用,不能在onCreate()甚至onResum()中调用,否则全是0。正确的姿势是在touch时间或者click事件触发的时候调用。...进阶:   避免View移动到边界然后被移出父控件消息不见。我们需要对上下左右边界进行处理。

    1.5K10

    Vue.Draggable 文档总结

    特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时,可以抛出所有变化 可以和现有的...和v-model不能共用 从表现上没有看出不同 element String,默认div 就是标签在渲染后展现出来的标签类型 也是包含拖动列表和插槽的外部标签 可以用来兼容UI...: 当拖动filter时是否触发event.preventDefault()默认触发 draggable: selector 格式为简单css选择器的字符串,定义哪些列表单元可以进行拖放 ghostClass...用来代理UI组件需要绑定的属性(:) on用来代理UI组件需要绑定的事件(@)       {{element.name}}        <button slot="footer" @click

    9K20

    jQuery

    事件 给元素绑定click事件,可以用如下方法: $('#btn1').click(function(){ // 内部的this指的是原生对象 // 使用jquery对象用 $(this...事件 事件函数列表: blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入(进入子元素触发) mouseout() 鼠标离开(离开子元素触发...事件冒泡的作用 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。...,比如onresize事件(jq中是resize),onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件,在短事件内多处触发执行绑定的函数,可以巧妙地使用定时器来减少触发的次数...回到顶部 20.jqueryUI jQuery UI是以 jQuery 为基础的代码库。包含底层用户交互、动画、特效和更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。

    4K20

    用于H5的移动开发框架

    jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。...Kendo UI不是另一个jQuery UI的克隆,它的每一个决定都是从优化性能出发。...;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画。   ...  在手机应用中(特别是iOS平台),很多操作菜单都是滑动触发的,比如短信界面,左滑显示“删除”按钮,点击可以删除该短信对话;邮件列表界面,左滑可以删除,右滑可以标注为"已读/未读"状态; mui的列表控件支持滑动触发操作菜单功能...,仅需按照特定格式拼装DOM结构即可;另外,滑动还支持事件触发,开发者可以通过监听滑动事件(slideleft/slideright),完成操作前的确认提醒工作。

    5.1K40

    用于H5的移动开发框架

    jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。...Kendo UI不是另一个jQuery UI的克隆,它的每一个决定都是从优化性能出发。...;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画。   ...  在手机应用中(特别是iOS平台),很多操作菜单都是滑动触发的,比如短信界面,左滑显示“删除”按钮,点击可以删除该短信对话;邮件列表界面,左滑可以删除,右滑可以标注为"已读/未读"状态; mui的列表控件支持滑动触发操作菜单功能...,仅需按照特定格式拼装DOM结构即可;另外,滑动还支持事件触发,开发者可以通过监听滑动事件(slideleft/slideright),完成操作前的确认提醒工作。

    4.9K10

    HTML5移动开发的10大移动APP开发框架

    jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。   ...Kendo UI不是另一个jQuery UI的克隆,它的每一个决定都是从优化性能出发。...;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画。   ...  在手机应用中(特别是iOS平台),很多操作菜单都是滑动触发的,比如短信界面,左滑显示“删除”按钮,点击可以删除该短信对话;邮件列表界面,左滑可以删除,右滑可以标注为”已读/未读”状态; mui的列表控件支持滑动触发操作菜单功能...,仅需按照特定格式拼装DOM结构即可;另外,滑动还支持事件触发,开发者可以通过监听滑动事件(slideleft/slideright),完成操作前的确认提醒工作。

    6.5K10

    drag事件详解:html5鼠标拖动排序及resize实现方案分析及实践

    对列表进行拖动排序,尺寸改变。之前一般会使用jQuery-UI(interactjs更加纯粹)。其通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。...相比之前用jquery-UI等库实现,更加方便(省去计坐标计算等)。...为了使元素拖动,必须把 draggable 属性设置为 true :testdraggable属性:设置元素是否拖动。...,被拖拽对象离开目标对象时触发拖动事件列表每一个拖动的元素,在拖动过程中,都会经历三个过程,拖动开始-->拖动过程中--> 拖动结束在拖动目标上触发事件 (源元素-被拖动的元素):ondragstart...- 在元素开始被拖动时候触发——拖动什么ondrag - 在元素被拖动时反复触发ondragend - 在拖动操作完成时触发释放目标时触发事件(目的地对象):ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发事件

    6.4K21
    领券