`

ie onmouseup和onclick事件执行顺序

阅读更多

今天项目要做个类似网页分享的功能,即选中文本文字弹出浮动层,点击浮动层图标可以弹出新页面。

在网上搜到一篇关于实现的方法(原处http://www.zhangxinxu.com/wordpress/?p=1428),为方便叙述将代码粘贴如下

var $sinaMiniBlogShare = function(eleShare, eleContainer) {
	var eleTitle = document.getElementsByTagName("title")[0];
	eleContainer = eleContainer || document;
	var funGetSelectTxt = function() {
		var txt = "";
		if(document.selection) {
			txt = document.selection.createRange().text;	// IE
		} else {
			txt = document.getSelection();
		}
		return txt.toString();
	};
	eleContainer.onmouseup = function(e) {
		e = e || window.event;
		var txt = funGetSelectTxt(), sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
		var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40, top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
		if (txt) {
			eleShare.style.display = "inline";
			eleShare.style.left = left + "px";
			eleShare.style.top = top + "px";
		} else {
			eleShare.style.display = "none";
		}
	};
	eleShare.onclick = function() {
		var txt = funGetSelectTxt(), title = (eleTitle && eleTitle.innerHTML)? eleTitle.innerHTML : "未命名页面";
		if (txt) {
			window.open('http://v.t.sina.com.cn/share/share.php?title=' + txt + '→来自页面"' + title + '"的文字片段&url=' + window.location.href);
		}
	};
};
 

这个方法火狐下执行没有问题,在IE下却无法使用,通过调试发现IE下在鼠标弹起时执行顺序似乎是先执行onmouseup,再执行onclick,由于点击新浪的logo后,先执行onmouseup中的关于logo显示的代码,logo被重新显示时页面中曾经选中的文字将被清除,这时再执行onclick事件再判断if(txt)时就不会通过了

考虑在页面中加一个隐藏域,页面选中文字后将文字保存到隐藏域中,在执行onclick事件时不直接去取选中文字而是从隐藏域中获得,这样IE下也能使用这个方法了

 

分享到:
评论

相关推荐

    javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element

    总结来说,理解 `onmousedown`、`onmouseup` 和 `onclick` 事件的执行顺序和交互是非常重要的,这有助于我们创建更复杂的用户交互。通过巧妙地使用 `setTimeout` 和其他JavaScript技巧,可以有效地解决事件冲突问题...

    解读IE和firefox下JScript和HREF的执行顺序

    在理解IE和Firefox浏览器下JScript(JavaScript的旧称)和HREF的执行顺序时,首先需要明确HTML元素的行为和JavaScript脚本如何交互。在这个场景中,主要关注的是`&lt;A&gt;`标签上的`onmouseup`和`onclick`事件处理程序...

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

    为了解决这个问题,我们需要理解鼠标事件的执行顺序:onmousedown -&gt; onmouseup -&gt; onclick。这意味着,当用户拖拽结束后松开鼠标按钮(onmouseup),紧接着会触发click事件。由于click事件的执行时间非常短暂,所以...

    实例区别onClick和onDBClick两事件方法

    onmousedown和onmouseup事件用于捕获鼠标按下和释放事件,而onclick事件用于捕获单击事件,ondblclick事件用于捕获双击事件。 在实际应用中,onClick和onDBClick事件方法可以用于实现各种交互效果,例如,弹出菜单...

    javaScript常用事件命令

    onkeypress 事件是在按下和释放某个按键时执行的事件。例如,在输入框中输入某个字符时,onkeypress 事件将被触发。 onkeyup 事件 onkeyup 事件是在释放某个按键时执行的事件。例如,在输入框中输入某个字符时,...

    第11章JAVASCRIPT事件和浏览器[参考].pdf

    JavaScript事件和浏览器交互是网页动态效果和用户互动的基础,它们使得网页从静态转变为动态,提升了用户体验。本章主要探讨以下几个核心知识点: 1. **事件处理概述**:事件处理是JavaScript编程中的关键部分,它...

    BlueBala » 兼容IE和Firefox的事件模型(拖动)

    在IE中,我们可以通过`onmousedown`、`onmousemove`和`onmouseup`事件来实现拖动,而在Firefox中,我们可以使用`addEventListener`添加这些事件的监听器。但这样的做法会导致代码的不兼容性,因为IE不支持`...

    js事件总结

    onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发...

    BCB 窗体与控件应用基础

    例如,可以在列表框的OnDblClick事件中调用一个命令按钮的OnClick事件过程,实现双击列表项时执行相应操作。在OnKeyPress事件中,可以检测用户输入的字符并作出相应处理,如验证输入的合法性。对于OnKeyDown和...

    JS鼠标事件大全

    Browser: IE4 | N4 | O 鼠标双击事件 onMouseDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标上的按钮被按下了 onMouseUp HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标按下后,松开时激发的事件 ...

    JS事件大全

    本文旨在全面解析JavaScript中的各种事件类型及其对应的浏览器兼容性,帮助开发者更好地理解和应用这些事件。 #### 一、鼠标事件 1. **onclick**:当用户点击元素时触发。IE3和Netscape2以上版本均支持。 2. **...

    js事件机制 .pdf

    **IE中事件对象的主要属性和方法:** - `type`: 事件的类型,例如"click"表示点击事件。 - `srcElement`: 触发事件的元素。 - `button`: 被按下的鼠标键,1表示左键,2表示右键,4表示中键。 - `clientX`/`clientY`:...

    鼠标事件大全 包括不同浏览器是否支持 鼠标事件非常完整

    在Web开发中,了解并掌握鼠标事件及其在不同浏览器中的支持情况对于创建响应式和交互性强的网页至关重要。本文将全面解析一系列鼠标事件,并探讨它们在Internet Explorer(IE)、Netscape Navigator(N)以及Opera...

    JavaScript程序设计——事件处理实验报告.docx

    - **鼠标事件**:如`onclick`(点击)、`onmousedown`(鼠标按下)、`onmouseup`(鼠标释放)、`onmousemove`(鼠标移动)、`onmouseout`(鼠标离开元素)和`onmouseover`(鼠标进入元素)。 - **Event对象**:...

    js事件模型

    总的来说,JavaScript事件模型包括事件的定义、监听、触发和处理,涉及到了事件处理器的注册、执行顺序和解除绑定。理解和熟练掌握这些概念和技巧,能够帮助开发者创建更加灵活和响应的Web应用,同时处理浏览器兼容...

    在TOCControl控件中可以调整各个图层的顺序

    在TOCControl控件中调整图层顺序主要通过响应鼠标事件(如鼠标按下、移动和释放)来实现。下面将分步骤介绍具体实现过程: 1. **定义全局变量** - `private ITOCControl mTOCControl;`:定义了一个指向TOCControl...

    Dreamweaver CS6认识事件和设置行为.pdf

    在Dreamweaver CS6中,事件和行为是创建动态网页的关键元素。事件是特定情况下触发的行为,而行为是对这些事件的响应,它们共同构成了网页交互性的基础。了解和掌握这些概念,能帮助开发者构建更丰富的用户体验。 ...

    WEB开发 之 JavaScript HTML DOM 事件.docx

    另外,`onmousedown`、`onmouseup`和`onclick`构成了完整的鼠标点击事件链。`onmousedown`在鼠标按钮按下时触发,`onmouseup`在释放鼠标按钮时触发,`onclick`则在完整的点击动作完成后触发。 7. **事件处理程序的...

Global site tag (gtag.js) - Google Analytics