`

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

    先通过一个简单例子测试并发现我说的问题,让你有个直观的印象,再接着看我的解决办法。

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

    鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =》onmouseup =》onclick,意味着在click事件执行时会与与其相关的mouse事件冲突。...

    浏览器事件大全.txt

    onmouseup IE4、N4 鼠标按下后松开鼠标时触发此事件 onmouseover IE3、N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4、N4 鼠标移动时触发此事件 onmouseout IE4、N3 当鼠标离开某对象范围时触发...

    onmouse事件总结

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

    js事件总结

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

    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函数中onmousedown和onclick的区别和联系探讨

    这两个事件很常见。 了解这两个事件的区别,但是实际并没有使用到这两... 如果在某个地方按下鼠标后移开鼠标在另外一个地方松开鼠标会触发onmousedown事件,但是onclick事件却不会被触发。 我们今天要实现的功能是点击a

    JavaScript事件列表解说

    onclick IE3、N2 鼠标点击时触发此事件 ondblclick IE4、N4 鼠标双击时触发此事件 onmousedown IE4、N4 按下鼠标时触发此事件 onmouseup IE4、N4 鼠标按下后松开鼠标时触发此事件 onmouseover IE3、N2 当...

    PHP100视频教程 50: Ajax+PHP检查用户名或邮件(三)

    1、Ajax技术实现用户名检查原理2、学习HTML的几种触发onblur 事件会在对象失去焦点时发生。onchange 事件会在域的内容改变时发生。...onmouseup 事件会在鼠标按键被松开时发生。3、如何获取表单中的数据内容

    Html事件列表

    onMouseUp HTML: 鼠标按下后,松开时激发的事件 onMouseOver HTML: 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove HTML: 鼠标移动时触发的事件 onMouseOut HTML: 当鼠标离开某对象范围时触发的事件 ...

    javascript 多浏览器 事件大全

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

    如何改变“behaviors”的缺省事件?

    事件设定文件放在 Dreamweaver 安装目录下的“ \Configuration\Behaviors\Events\ ”文件夹,比如对于 4.0 以上版本浏览器,打开文件“ 4.0 and Later Browsers.htm ”。  &lt; A onClick="*" onDblClick="" ...

    js中的eventType事件及其浏览器支持性介绍

    一般事件 事件 浏览器支持 描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown IE4|N4|O 鼠标上的按钮被按下了 onMouseUp IE4|N4|O 鼠标按...

    HTML表单事件大全

    onMouseUp 鼠标按下后,松开时激发的事件 onMouseOver 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove 鼠标移动时触发的事件 onMouseOut 当鼠标离开某对象范围时触发的事件 onKeyPress 当键盘上的某个键...

    js 事件小结 表格区别

    一般事件 事件 浏览器支持 描述 onClick HTML: 2|3|3.2|4Browser: IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2|3|3.2|4Browser:IE4|N4|O 鼠标双击事件 onMouseDown ...

    javaScript常用事件

    1.onclick 鼠标单击事件 通常在下列基本对象中产生: button(按钮对象) checkbox(复选框)或(检查列表框) radio (单选钮) reset buttons(重要按钮) submit buttons(提交按钮) 例如可通过下列按钮...

    JS setCapture 区域外事件捕捉

    不过setCapture不支持键盘事件, 只能捕获以下鼠标事件:onmousedown、onmouseup、onmousemove、onclick、ondblclick、onmouseover和onmouseout。 程序中主要是要捕获onmousemove和onmouseup事件。 msdn的介绍中还说...

    html鼠标事件整理

    个人整理的html所有的鼠标事件及方法:onblur 、onclick 、ondblclick 、onfocus 、onkeydown 、onkeypress 、onkeydown 、onKeyUp 、onmousedown 、onmousemove 、onmouseout 、onmouseover 、onmouseup ...

Global site tag (gtag.js) - Google Analytics