`
Odysseus_110
  • 浏览: 120453 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

js 中 在 拖动时 阻止 click事件

 
阅读更多

最近在做一个小应用时碰到一个需求是 鼠标可以拖动图片,然后在鼠标单击图片的时候可以放大图片。

 

这样就碰到一个问题,因为鼠标要实现拖放,鼠标首先是要单击图片然后才开始 拖放。所以拖放和放大功能就会重叠。

 

要解决这个问题,网上搜到一个解决方法是 设置一个全局变量。 

 

因为拖放时 鼠标的 动作顺序是: a1 鼠标点击(mousedown), a2 鼠标移动(mousemove), a3 鼠标抬起(mouseup)

      放大时 鼠标的 动作顺序是: b1 鼠标点击(mousedown),                                          b2 鼠标抬起(mouseup)

 

所以 在实现 单击放大的时候 不用click事件, 而是用mouseup。

 

设置一个isdrag的全局变量,在a1和b1的鼠标点击的时候设置为false,只有在a2鼠标移动的时候才把 isdrag 设置为true, 这样就只有放大的时候 mouseup的函数才会被调用。

 

 

//drag code

$img.mousedown(function(e){
         isdrag = false;
         $img.bind('mousemove.dragstart', function(e){				
				isdrag = true;
                           .......
                           .........
                           .........
                                 return false 
         })
         return false 
})

$(document).bind('mouseup', function(e){
	$img.unbind('mousemove.dragstart');	
})

// zoom code
$img.bind('mouseup', function(e){
        if(!isdrag){
               ..............
               ..............
               ..............
        }
})
 
分享到:
评论

相关推荐

    js 前端鼠标拖动事件实例

    这个实例主要涉及的关键词是“js”(JavaScript)、“ASP”(尽管在这个上下文中并不直接相关,但可能是用户提及的一个相关技术栈)、“web”(Web开发)以及“鼠标事件”。我们将重点讲解JavaScript中的鼠标拖动...

    js解决事件冲突

    例如,在默认情况下,`mousedown`事件通常优先于`dblclick`事件被触发,这是因为`dblclick`实际上由两次`click`事件组成,而每一次`click`又包含了`mousedown`和`mouseup`事件。因此,在实现特定功能时,需要考虑...

    解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题

    在Vue.js应用中,我们经常会遇到自定义指令和事件处理之间的冲突问题,特别是涉及到拖拽操作和点击事件时。在本例中,标题为“解决VUE自定义拖拽指令时onmouseup与click事件冲突问题”,描述中指出,功能是一个支持...

    js事件机制 .pdf

    JavaScript中事件的处理主要涉及到事件流的概念。事件流描述了从页面中接收事件的顺序。主要有两种模型:**冒泡模型**和**捕获模型**。 - **冒泡模型**:事件从最深的节点开始向上逐级触发,直到到达最外层的节点。...

    百度地图API详解之事件机制,闭包机制,marker事件,信息窗口,叠加层

    在事件处理函数中,由于事件触发时可能在循环或其他上下文中,闭包用于保存和隔离变量的值,避免因作用域链的问题导致意外的结果。 3. **marker事件**:在百度地图API中,Marker对象代表地图上的一个标记,可以监听...

    jQuery百度可拖动登录窗口代码.zip

    这里要注意,我们需要阻止默认的文本选择行为,以确保用户在拖动时不会选中文字。 4. **关闭按钮**:在登录窗口内添加一个关闭按钮,通过`click`事件处理函数实现关闭窗口的功能。这通常涉及到元素的显示/隐藏控制...

    27 - Click and Drag.rar

    在IT行业中,JavaScript(简称JS)是一种广泛使用的脚本语言,尤其在网页开发中不可或缺。"27 - Click and Drag"这个标题暗示我们可能要探讨的是JavaScript中的点击和拖动功能,这通常涉及到用户交互和事件处理。在...

    javascript事件列表解说

    JavaScript事件是Web开发中不可或缺的一部分,它允许我们与用户进行交互,响应用户的操作,并控制页面的行为。本篇文章将深入解析JavaScript事件列表,帮助你更好地理解和应用这些事件。 首先,JavaScript事件分为...

    js鼠标点击拖动生成小图标特效

    在JavaScript编程领域,实现"js鼠标点击拖动生成小图标特效"是一种常见的交互设计技术,它增强了用户与网页的互动体验。这种特效主要依赖于JavaScript事件处理和DOM操作,结合CSS来实现视觉效果。以下是关于这个主题...

    web弹出框拖动放大缩小.rar

    本资源“web弹出框拖动放大缩小.rar”显然关注的是如何实现一个具有拖动、缩放功能的弹出框,这在现代Web应用中是非常实用且用户体验友好的特性。下面将详细讨论这些知识点。 1. **弹出框设计与实现**: 弹出框...

    raphael绘制可拖动控件

    在本文中,我们将深入探讨如何使用Raphaël JavaScript库来创建可拖动的SVG控件,并结合jQuery UI实现交互式功能。Raphaël是一个强大的JavaScript库,它允许开发者在网页上创建复杂的矢量图形,支持SVG和VML格式,...

    js表格自由拖拽排序特效代码.zip

    在`dragover`事件中,通常需要阻止默认行为并允许元素被放下;最后,在`drop`事件中,根据拖动源和目标的位置调整表格列的顺序。 此外,为了使拖拽过程有良好的用户体验,我们还需要处理视觉反馈,例如改变鼠标形状...

    JS中mouseup事件丢失的原因与解决办法

    在JavaScript编程中,`mouseup`事件是一个非常关键的交互元素,它发生在用户释放鼠标按钮时。然而,在实际应用中,可能会遇到`mouseup`事件丢失的问题,导致某些功能无法正常完成,比如选择区域、拖拽操作等。本文将...

    JavaScript 事件冒泡应用实例分析

    JavaScript事件冒泡是DOM(文档对象模型)中事件处理的核心机制之一,它描述了事件从最深的DOM节点开始触发,然后逐级向上层节点传播的过程。在大型的Web交互项目,尤其是WebGame中,对事件冒泡的精确控制至关重要,...

    jQuery支持拖动的弹出窗口登录和注册表单提交验证特效

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本主题聚焦于"jQuery支持拖动的弹出窗口登录和注册表单提交验证特效",这是一个常见且实用的功能,适用于...

    可做拼图游戏的鼠标拖拽图片更换位置js代码.zip

    `mousedown`事件触发拖动开始,`mousemove`事件在鼠标移动时不断触发,更新图片的位置,而`mouseup`事件则在释放鼠标时触发,结束拖动。 2. **DOM操作**: - 获取和设置元素属性:为了实现图片的显示和拖动,我们...

    一个支持指针事件的实例代码

    5. **事件冒泡和捕获**:事件在DOM树中传播,可以先从最深的节点开始向上(冒泡阶段)或从根节点向下(捕获阶段)传递。理解这一点有助于决定在哪里添加事件监听器。 6. **事件委托**:为了提高性能和减少内存消耗...

    wap图片滚动特效无css3元素纯js脚本编写

    在`touchstart`事件处理函数中使用`event.preventDefault()`来取消默认行为,防止在拖动开始时产生不必要的点击。 **问题二:网页中的上下滚动条不能在拖动图片时滚动** 解决这个问题的关键在于智能地处理`event....

    jQuery 可以拖动的div实现代码 脚本之家修正版

    当然,代码使用起来也非常的方便,很多东西就不用自己再去琢磨了。... 另外,请注意事件起泡,在jQuery以及任何实现div拖动的js代码中,事件起泡无疑都是要阻止的。 在jQuery 的bind或者unbind方法中,函数的返回值最

    js实现左侧树

    在JavaScript中,我们可以用对象来表示树的节点,例如: ```javascript var node = { id: '1', text: '菜单项1', children: [ { id: '1.1', text: '子菜单项1.1' }, { id: '1.2', text: '子菜单项1.2' } ] };...

Global site tag (gtag.js) - Google Analytics