`
wanghailiang333
  • 浏览: 199721 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

鼠标长按事件处理

javascriptevent鼠标长按 
阅读更多

这个月一直再弄一件作品，需要大量的运用javascript语言，学习之余也把自己的代码与大家分享。

 

以下的javascript主要是完成，鼠标在网页中长时间按住不动，所发生的反应，此处的反应就是在鼠标坐标处，生成一个黑框。

 

<html>

<head>
<script>

var secondTime = 3;   //长按300 毫秒后做出相应的反应，此处是弹出一个黑框
var timeFlag = false;

function blackBox(x,y){   //长按后调用生成黑框的方法
		var box = document.createElement('div');
		box.className = 'divT';
		box.id = 'mouseBox';
		box.style.top = y - 50;
		box.style.left = x - 50;
		document.body.appendChild(box);
}


function mouseStay(x,y){
	
	if(secondTime == 0){
		blackBox(x,y);
	}else if(timeFlag){
		secondTime--;
		setTimeout(  //长按事件时间的处理
			(function(px,py){
				return function(){
					mouseStay(px,py);
				}
			})(x,y),
			100
		);
	}
}


window.onload = function(){
	document.onmousedown = function(event){   //事件使用函数需要有个event的参数
		if(document.body.lastChild.id == 'mouseBox')
			document.body.removeChild(document.body.lastChild);
		timeFlag = true;
		mouseStay(event.clientX,event.clientY);
	}
	document.onmouseup = function(){
		timeFlag = false;
		secondTime = 3;
	}
}

</script>

<style>
*{
	margin:0;
	padding:0;
}


.divT{
	float:left;
	width:100px;
	height:100px;
	background:#000;
	
	position:absolute;
	
}
</style>
</head>

<body>
</body>


</html>
 
0
顶
2
踩
分享到：
| Firefox现在不支持innerText
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery实现长按按钮触发事件的方法

    3. 在按下事件中设置一个定时器，当定时器时间达到预设的长按时间阈值后，触发相应的事件处理函数，改变按钮的文本或其他样式。 4. 为了防止用户在长按过程中不小心松开鼠标或手指导致的误触发，需要在按钮的`....

    JavaScript长按鼠标左键弹出快捷菜单效果代码

    3. **`mouseup`事件处理函数**：当`mouseup`事件触发时，清除计时器，防止在鼠标抬起后快捷菜单仍然弹出。 ```javascript function handleMouseUp(event) { clearTimeout(timer); // 假设timer是之前在mousedown中...

    vue自定义移动端touch事件，点击、滑动、长按事件

    最后是长按事件，这通常涉及到 `touchstart` 和 `touchend` 事件，但需要额外处理时间间隔。当 `touchstart` 触发后开始计时，若在一定时间内没有接收到 `touchend` 事件，则认为是长按操作。以下是如何实现长按事件...

    移动端html5模拟长按事件的实现方法

    首先，我们要理解为何要模拟长按事件。在移动设备上，长按操作通常用于触发上下文相关的菜单或功能，如选择文本、复制、粘贴等。在H5页面中，如果需要这种交互，我们就需要自定义逻辑来实现。 实现思路如下： 1. *...

    易语言源码实现按钮的长按功能.rar

    在本文中，我们将深入探讨易语言中的事件驱动编程、按钮控件以及长按事件的处理机制。 首先，易语言基于事件驱动编程模型，这种模型中，程序的执行是由用户操作或其他外部事件触发的。例如，当用户点击或长按一个...

    qt 区分鼠标左键单击，双击事件

    在标准的Qt事件处理机制中，`QMouseEvent`类提供了鼠标按键按下、释放等事件，但并没有区分单击和双击。然而，开发者可以通过一些策略来实现这一功能，比如使用定时器来判断连续两次点击之间的时间间隔，从而判断是...

    操作鼠标的C++代码

    3. **事件处理**: 在更复杂的用户界面应用中，如基于Qt或wxWidgets的程序，可以注册鼠标事件处理器来响应用户的鼠标操作。这些框架提供了丰富的API来方便处理鼠标事件，如点击、移动、滚轮滚动等。 4. **多线程与...

    js实现长按二维码识别及上传二维码识别

    // 如果需要支持鼠标长按，可以添加以下代码 targetElement.addEventListener('mousedown', handleTouchStart); targetElement.addEventListener('mouseup', handleTouchEnd); ``` 接下来，我们需要实现`...

    jQ长按鼠标左键弹出菜单.zip

    在这个实例中，jQuery用于监听鼠标的mousedown和mouseup事件，以及计算按下和释放鼠标之间的时间差，以判断是否满足“长按”的条件。通常，长按时间阈值可设置为300毫秒至1秒，具体值可以根据实际需求进行调整。 ...

    Canvas鼠标点击长按粒子动画特效.zip

    1. **jQuery特效**：jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互。在这个案例中，jQuery用于监听鼠标的点击和长按事件。当用户按下鼠标并保持一段时间（长按）时，jQuery会触发特定...

    jQ长按鼠标左键弹出菜单 jQuery长按鼠标左键弹出快捷菜单代码.zip

    在本例中，重点在于事件处理，特别是模拟长按（mousedown）事件和释放（mouseup）事件。jQuery提供了`.mousedown()`和`.mouseup()`方法来绑定这两个事件。当用户按下鼠标左键时，`.mousedown()`会被触发，而松开时，...

    android详细解释键盘和鼠标事件.pdf

    Android 中的一套 UI 控件都是通过派发鼠标和键盘事件来实现的，然后每个控件收到相应的事件之后，做相应的处理。 一、鼠标事件 在 Android 中，鼠标事件可以分为两类：触摸屏事件和按键事件。触摸屏事件包括按下...

    按钮的长按

    // 长按处理 void CMyDialog::OnLongPress() { // 在这里执行长按操作 } ``` 5. **注意事项**： - 要确保在退出时销毁定时器，防止内存泄漏。 - 在多线程环境中，可能需要考虑线程同步问题。 - 考虑到用户...

    h5长按短按双击模块化

    综上所述，"h5长按短按双击模块化"实例涉及了前端开发中事件处理、动画效果、模块化编程、响应式设计等多个核心知识点，对于初学者来说，是一个很好的学习和实践案例。通过这个项目，开发者不仅可以掌握基本的交互...

    MFC实现长按按钮，不断执行某一语句，实现长按功能

    - `ON_WM_LBUTTONDOWN()`：处理左键按下事件。 - `ON_WM_LBUTTONUP()`：处理左键释放事件。 - `ON_BN_CLICKED()`：虽然不是必需的，但通常用来处理单击事件，确保长按时不会触发常规点击行为。 2. **处理 WM_...

    按住鼠标左键选中区域元素框js代码

    例如，`mousedown`事件可能需要记录初始位置，`mousemove`事件需要更新选取框，`mouseup`事件则可能需要处理选区内的元素。 6. **解除监听**：为了防止内存泄漏和不必要的事件处理，当选取操作完成后，应移除监听器...

    <html5+css3+js>各种事件

    2. **DOM0级事件处理**：这是一种JavaScript级别的事件处理，通过直接给元素的事件属性赋值来添加事件监听器，如`element.onclick = function() { alert('Clicked!'); }`。这种方式简单易用，但每个元素只能绑定一个...

    长按鼠标粒子穿越HTML5特效.zip

    此特效的核心是利用用户的鼠标长按动作触发粒子效果，创造出一种动态视觉的穿越感，提升用户在网页上的沉浸式体验。 HTML5是现代网页开发的标准，它引入了许多新特性，如语义化标签（如、等）、离线存储...

    C#写的键盘和鼠标记录程序,(记录你点了多少次键盘和鼠标)

    同时，可能还使用了事件处理机制来处理捕获到的键盘和鼠标事件。 4. **多线程编程**：因为钩子函数通常在不同的线程上下文中运行，开发者可能需要处理多线程问题，确保数据的正确性和同步。 5. **文件操作**：程序...

    布局管理器及事件处理代码

    - View.OnLongClickListener：处理长按事件。 - View.OnTouchListener：处理触摸事件，提供了更细致的滑动、按下、释放等操作。 - AdapterView.OnItemClickListener：在列表或网格视图中处理项点击事件。 - View...

Magicbox
Global site tag (gtag.js) - Google Analytics