经过在Chrome、IE和Firefox上测试，发现在按钮上按下鼠标，拖动到按钮外松开，可以触发mousedown事件，但无法触发mouseup和click事件。在这种情况下，如果想触发按钮的mouseup和click事件，应该怎么做呢？
解决方法：
定义一个JS变量，表示按钮是否按下，初始化为false。在按钮mousedown事件的响应函数里，将这个变量置为true。然后监听整个页面的mouseup事件，在响应函数里，判断变量是否为true；如果不是true，啥都不做；如果是true，说明之前刚刚按下了按钮，就调用按钮的mouseup或click响应函数，同时将变量置为false。
也可以用hidden元素(<input type="hidden">)或按钮的隐藏属性来记录按钮的状态。
一个例子：
<!DOCTYPE html>
<html>
<head>
<title>buttonTest.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
</head>
<body>
<br>
<br>
<button type="button" id="button1" _status="up">Click</button>
<div id="infoDiv"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").mousedown(function(){
$(this).attr("_status", "down");
$("#infoDiv").append("<div>Mouse down</div>");
});
$("body").mouseup(function(){ // 也可以用$(document).mouseup
if ($("#button1").attr("_status")=="down") {
$("#button1").attr("_status", "up");
$("#infoDiv").append("<div>Mouse up</div>");
}
});
$("#button1").click(function(){
$("#infoDiv").append("<div>Mouse clicked</div>");
});
});
</script>
</body>
</html>
相关推荐
### 9个鼠标触发事件详解 ...最后，了解事件触发的顺序对于避免逻辑错误也很重要，例如在同一个元素上按下并松开鼠标右键时，只会触发 `mousedown` 和 `mouseup` 事件，而不会触发 `click` 事件。
4. onMouseUp：鼠标按下后，松开时激发的事件。 5. onMouseOver：当鼠标移动到某对象范围的上方时触发的事件。 6. onMouseMove：鼠标移动时触发的事件。 7. onMouseOut：当鼠标离开某对象范围时触发的事件。 这些...
2. `mousemove`事件：当用户在页面上移动鼠标时，只要鼠标按钮保持被按下状态，就会持续触发此事件。这个事件是实现拖动的核心，开发者需要在处理函数中计算鼠标当前位置与初始位置的差值，并据此更新元素的位置。 ...
这意味着，当用户拖拽结束后松开鼠标按钮（onmouseup），紧接着会触发click事件。由于click事件的执行时间非常短暂，所以很难在click事件发生前进行有效区分用户是进行拖拽还是点击操作。为了解决这一问题，我们可以...
例如，我们可以为页面中的特定元素绑定`mousedown`和`mouseup`事件，以便在鼠标按下和松开时执行相应的函数。 ```javascript $('#targetElement').on('mousedown', function() { // 鼠标按下时的操作 }); $('...
下面是一个简单的示例，展示了如何在按钮的`Click`事件处理程序中捕获鼠标，并在`MouseMove`事件中获取并显示鼠标位置： ```csharp using System.Windows; using System.Windows.Input; public partial class ...
} /* 鼠标按下时，按钮放大1.2倍 */ 100% { transform: scale(1); } /* 鼠标松开时，恢复原状 */ } ``` 然后，我们将这个动画应用到按钮元素上，并设置动画的持续时间、延迟和播放次数： ```css .button { ...
当用户按下鼠标按钮时，`onmousedown`事件会被触发。在示例代码中，`down()`函数就是在处理这个事件，它会更新页面上的文本，显示“您按下了鼠标”。 ```javascript function down() { form1.text.value = "您按...
动画效果如下： GIF看起来可能会有点卡 wxml 确定 wxss .confirm{ width: 325rpx; height: 80rpx; background: #07c160; border-radius: 6rpx; font-size: 30rpx; color: #fff;....bubble:after
- **定义**：当鼠标按钮被按下时触发。 - **用途**：常用于拖拽操作、开始绘制图形等。 - **示例**： ```html (event)">Drag me! ``` #### onMouseUp HTML: 鼠标按下后，松开时激发的事件 - **定义**：鼠标按钮...
触发click事件的方式有两种：一种是通过用户的鼠标操作，即在鼠标指针位于匹配元素上方时，按下并松开鼠标左键；另一种是通过编程方式，即使用jQuery的click()方法。 ### click()方法 click()方法是jQuery中用于...
这可以通过添加一个`mouseup`事件监听器并在非目标元素上触发时移除`.clicked`类来实现，如下所示： ```javascript document.addEventListener('mouseup', function(event) { if (!event.target.classList....
' 按下鼠标时的操作 End Sub Protected Overrides Sub OnMouseUp(e As MouseEventArgs) MyBase.OnMouseUp(e) ' 松开鼠标时的操作 End Sub End Class ``` 在实际应用中，你可能还需要考虑按钮的响应区域、透明...
当鼠标按下时，记录初始位置；移动时，更新div的位置；松开鼠标时，结束拖动。 ```javascript $(document).ready(function() { $('.draggable').on('mousedown', function(e) { $(this).addClass('dragging'); ...
1. **触发浏览器的drag操作**：当用户按下鼠标并移动，如果浏览器识别到这个行为可能是拖拽操作，它可能会自动处理`mouseup`事件，导致开发者注册的`mouseup`事件处理器未被调用。这可以通过阻止事件的默认行为来...
- **方法一：**当右键被禁用时，可以尝试先选中目标，然后在目标上按住右键，当弹出警告窗口时，不要松开右键，而是移动鼠标到“确定”按钮上，同时按下左键，然后松开左键，接着松开右键，这样通常可以解除限制。...
1. `click`：用户单击鼠标按钮或按下回车键时触发。 2. `dblclick`：用户双击鼠标按钮时触发。 3. `mousedown`：用户按下鼠标按钮还未弹起时触发。 4. `mouseup`：用户释放鼠标按钮时触发。 鼠标事件可以非常灵活地...
onmousedown和onmouseup事件分别在鼠标按钮被按下和释放时触发。这两个事件经常与onclick事件结合使用来完成更复杂的交互，比如拖放操作。 ```javascript (this)" onmouseup="mUp(this)">鼠标抬起 function mDown...