最近在做一个小应用时碰到一个需求是 鼠标可以拖动图片,然后在鼠标单击图片的时候可以放大图片。
这样就碰到一个问题,因为鼠标要实现拖放,鼠标首先是要单击图片然后才开始 拖放。所以拖放和放大功能就会重叠。
要解决这个问题,网上搜到一个解决方法是 设置一个全局变量。
因为拖放时 鼠标的 动作顺序是: 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”(JavaScript)、“ASP”(尽管在这个上下文中并不直接相关,但可能是用户提及的一个相关技术栈)、“web”(Web开发)以及“鼠标事件”。我们将重点讲解JavaScript中的鼠标拖动...
例如,在默认情况下,`mousedown`事件通常优先于`dblclick`事件被触发,这是因为`dblclick`实际上由两次`click`事件组成,而每一次`click`又包含了`mousedown`和`mouseup`事件。因此,在实现特定功能时,需要考虑...
在Vue.js应用中,我们经常会遇到自定义指令和事件处理之间的冲突问题,特别是涉及到拖拽操作和点击事件时。在本例中,标题为“解决VUE自定义拖拽指令时onmouseup与click事件冲突问题”,描述中指出,功能是一个支持...
JavaScript中事件的处理主要涉及到事件流的概念。事件流描述了从页面中接收事件的顺序。主要有两种模型:**冒泡模型**和**捕获模型**。 - **冒泡模型**:事件从最深的节点开始向上逐级触发,直到到达最外层的节点。...
在事件处理函数中,由于事件触发时可能在循环或其他上下文中,闭包用于保存和隔离变量的值,避免因作用域链的问题导致意外的结果。 3. **marker事件**:在百度地图API中,Marker对象代表地图上的一个标记,可以监听...
这里要注意,我们需要阻止默认的文本选择行为,以确保用户在拖动时不会选中文字。 4. **关闭按钮**:在登录窗口内添加一个关闭按钮,通过`click`事件处理函数实现关闭窗口的功能。这通常涉及到元素的显示/隐藏控制...
在IT行业中,JavaScript(简称JS)是一种广泛使用的脚本语言,尤其在网页开发中不可或缺。"27 - Click and Drag"这个标题暗示我们可能要探讨的是JavaScript中的点击和拖动功能,这通常涉及到用户交互和事件处理。在...
JavaScript事件是Web开发中不可或缺的一部分,它允许我们与用户进行交互,响应用户的操作,并控制页面的行为。本篇文章将深入解析JavaScript事件列表,帮助你更好地理解和应用这些事件。 首先,JavaScript事件分为...
在JavaScript编程领域,实现"js鼠标点击拖动生成小图标特效"是一种常见的交互设计技术,它增强了用户与网页的互动体验。这种特效主要依赖于JavaScript事件处理和DOM操作,结合CSS来实现视觉效果。以下是关于这个主题...
本资源“web弹出框拖动放大缩小.rar”显然关注的是如何实现一个具有拖动、缩放功能的弹出框,这在现代Web应用中是非常实用且用户体验友好的特性。下面将详细讨论这些知识点。 1. **弹出框设计与实现**: 弹出框...
在本文中,我们将深入探讨如何使用Raphaël JavaScript库来创建可拖动的SVG控件,并结合jQuery UI实现交互式功能。Raphaël是一个强大的JavaScript库,它允许开发者在网页上创建复杂的矢量图形,支持SVG和VML格式,...
在`dragover`事件中,通常需要阻止默认行为并允许元素被放下;最后,在`drop`事件中,根据拖动源和目标的位置调整表格列的顺序。 此外,为了使拖拽过程有良好的用户体验,我们还需要处理视觉反馈,例如改变鼠标形状...
在JavaScript编程中,`mouseup`事件是一个非常关键的交互元素,它发生在用户释放鼠标按钮时。然而,在实际应用中,可能会遇到`mouseup`事件丢失的问题,导致某些功能无法正常完成,比如选择区域、拖拽操作等。本文将...
JavaScript事件冒泡是DOM(文档对象模型)中事件处理的核心机制之一,它描述了事件从最深的DOM节点开始触发,然后逐级向上层节点传播的过程。在大型的Web交互项目,尤其是WebGame中,对事件冒泡的精确控制至关重要,...
在IT行业中,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本主题聚焦于"jQuery支持拖动的弹出窗口登录和注册表单提交验证特效",这是一个常见且实用的功能,适用于...
`mousedown`事件触发拖动开始,`mousemove`事件在鼠标移动时不断触发,更新图片的位置,而`mouseup`事件则在释放鼠标时触发,结束拖动。 2. **DOM操作**: - 获取和设置元素属性:为了实现图片的显示和拖动,我们...
5. **事件冒泡和捕获**:事件在DOM树中传播,可以先从最深的节点开始向上(冒泡阶段)或从根节点向下(捕获阶段)传递。理解这一点有助于决定在哪里添加事件监听器。 6. **事件委托**:为了提高性能和减少内存消耗...
在`touchstart`事件处理函数中使用`event.preventDefault()`来取消默认行为,防止在拖动开始时产生不必要的点击。 **问题二:网页中的上下滚动条不能在拖动图片时滚动** 解决这个问题的关键在于智能地处理`event....
当然,代码使用起来也非常的方便,很多东西就不用自己再去琢磨了。... 另外,请注意事件起泡,在jQuery以及任何实现div拖动的js代码中,事件起泡无疑都是要阻止的。 在jQuery 的bind或者unbind方法中,函数的返回值最
在JavaScript中,我们可以用对象来表示树的节点,例如: ```javascript var node = { id: '1', text: '菜单项1', children: [ { id: '1.1', text: '子菜单项1.1' }, { id: '1.2', text: '子菜单项1.2' } ] };...