- 浏览: 170335 次
- 性别:
- 来自: 天津
文章分类
最新评论
今天项目要做个类似网页分享的功能,即选中文本文字弹出浮动层,点击浮动层图标可以弹出新页面。
在网上搜到一篇关于实现的方法(原处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下也能使用这个方法了
发表评论
-
ajax下载文档 ClientAbortException: java.net.SocketException: Connection reset by pee
2013-08-28 13:58 2298众所周知ajax是使用了浏览器内部的XmlHttpRequ ... -
在js里引用另一个js文件
2013-08-28 10:58 824new_element=document.createE ... -
<转> js替换字符正则表达式
2013-08-16 14:28 808function replace() { var str ... -
<转> JQuery选择器
2013-08-16 10:24 857<html> <head> &l ... -
jQuery获取Select选择的Text和 Value(转)
2013-08-13 09:47 583jQuery获取Select选择的Text和Valu ... -
<转>javascript获取地址栏参数
2013-08-12 10:03 705function GetQueryString(name){v ... -
iframe子页面内刷新同页面中另一个iframe
2013-08-09 15:25 10560框架页面如下: <div id="a ... -
jquery动态修改链接的onclick方法
2013-08-07 11:29 2326用jquery动态修改链接的onclick方法的传递参数,在 ... -
《转》JS怎么刷新当前页面
2013-04-15 13:17 846reload 方法,该方法强迫 ... -
<转>iframe去掉横向滚动条
2012-05-15 14:45 1242如题,就是在网页中, ... -
iframe同步刷新时好时坏问题
2012-04-19 17:04 1241页面由左右两个iframe组成,要求右面内容更新时(内容跟左面 ... -
js浮动效果
2012-02-14 17:29 1017项目中某页面需要固定某个div内容,实际需求是这样的,有个评分 ... -
js判断页面关闭 仅支持IE6
2012-02-08 16:38 1657关闭页面时同时执行onbeforeunload和onunloa ... -
onpropertychange与输入法有关
2012-02-03 14:56 1203页面输入框经常有只允许输入数字的限制,一般都用onproper ... -
<转>name和function名字不能相同
2012-01-05 16:40 0今天突然碰到form表单的名字与js方法的名字相同导致找不到j ... -
onmousedown、onmouseup和onclick的奇怪问题
2011-07-08 10:04 2255将setTimeout的时间设置为0,告诉浏览器当它为当前任何 ... -
超链接<a>中属性href与target相冲突的地方
2011-03-25 11:47 1921今天在项目中写了两行代码,出现不同的效果: ①<a h ... -
<转>键盘回车事件导致页面刷新的问题
2011-03-24 11:18 874我最近在做一个 Ajax 查询的功能,代码如下: ... -
使用prototype的有用小方法
2010-09-13 15:33 939今天刚刚接触js中对象 ... -
JS 字符串连接性能
2010-09-12 17:18 2166在W3SCHOOL中有讨论js字符串连接方法性能对比的篇章如下 ...
相关推荐
总结来说,理解 `onmousedown`、`onmouseup` 和 `onclick` 事件的执行顺序和交互是非常重要的,这有助于我们创建更复杂的用户交互。通过巧妙地使用 `setTimeout` 和其他JavaScript技巧,可以有效地解决事件冲突问题...
在理解IE和Firefox浏览器下JScript(JavaScript的旧称)和HREF的执行顺序时,首先需要明确HTML元素的行为和JavaScript脚本如何交互。在这个场景中,主要关注的是`<A>`标签上的`onmouseup`和`onclick`事件处理程序...
为了解决这个问题,我们需要理解鼠标事件的执行顺序:onmousedown -> onmouseup -> onclick。这意味着,当用户拖拽结束后松开鼠标按钮(onmouseup),紧接着会触发click事件。由于click事件的执行时间非常短暂,所以...
onmousedown和onmouseup事件用于捕获鼠标按下和释放事件,而onclick事件用于捕获单击事件,ondblclick事件用于捕获双击事件。 在实际应用中,onClick和onDBClick事件方法可以用于实现各种交互效果,例如,弹出菜单...
onkeypress 事件是在按下和释放某个按键时执行的事件。例如,在输入框中输入某个字符时,onkeypress 事件将被触发。 onkeyup 事件 onkeyup 事件是在释放某个按键时执行的事件。例如,在输入框中输入某个字符时,...
JavaScript事件和浏览器交互是网页动态效果和用户互动的基础,它们使得网页从静态转变为动态,提升了用户体验。本章主要探讨以下几个核心知识点: 1. **事件处理概述**:事件处理是JavaScript编程中的关键部分,它...
在IE中,我们可以通过`onmousedown`、`onmousemove`和`onmouseup`事件来实现拖动,而在Firefox中,我们可以使用`addEventListener`添加这些事件的监听器。但这样的做法会导致代码的不兼容性,因为IE不支持`...
onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发...
例如,可以在列表框的OnDblClick事件中调用一个命令按钮的OnClick事件过程,实现双击列表项时执行相应操作。在OnKeyPress事件中,可以检测用户输入的字符并作出相应处理,如验证输入的合法性。对于OnKeyDown和...
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 鼠标按下后,松开时激发的事件 ...
本文旨在全面解析JavaScript中的各种事件类型及其对应的浏览器兼容性,帮助开发者更好地理解和应用这些事件。 #### 一、鼠标事件 1. **onclick**:当用户点击元素时触发。IE3和Netscape2以上版本均支持。 2. **...
**IE中事件对象的主要属性和方法:** - `type`: 事件的类型,例如"click"表示点击事件。 - `srcElement`: 触发事件的元素。 - `button`: 被按下的鼠标键,1表示左键,2表示右键,4表示中键。 - `clientX`/`clientY`:...
在Web开发中,了解并掌握鼠标事件及其在不同浏览器中的支持情况对于创建响应式和交互性强的网页至关重要。本文将全面解析一系列鼠标事件,并探讨它们在Internet Explorer(IE)、Netscape Navigator(N)以及Opera...
- **鼠标事件**:如`onclick`(点击)、`onmousedown`(鼠标按下)、`onmouseup`(鼠标释放)、`onmousemove`(鼠标移动)、`onmouseout`(鼠标离开元素)和`onmouseover`(鼠标进入元素)。 - **Event对象**:...
总的来说,JavaScript事件模型包括事件的定义、监听、触发和处理,涉及到了事件处理器的注册、执行顺序和解除绑定。理解和熟练掌握这些概念和技巧,能够帮助开发者创建更加灵活和响应的Web应用,同时处理浏览器兼容...
在TOCControl控件中调整图层顺序主要通过响应鼠标事件(如鼠标按下、移动和释放)来实现。下面将分步骤介绍具体实现过程: 1. **定义全局变量** - `private ITOCControl mTOCControl;`:定义了一个指向TOCControl...
在Dreamweaver CS6中,事件和行为是创建动态网页的关键元素。事件是特定情况下触发的行为,而行为是对这些事件的响应,它们共同构成了网页交互性的基础。了解和掌握这些概念,能帮助开发者构建更丰富的用户体验。 ...
另外,`onmousedown`、`onmouseup`和`onclick`构成了完整的鼠标点击事件链。`onmousedown`在鼠标按钮按下时触发,`onmouseup`在释放鼠标按钮时触发,`onclick`则在完整的点击动作完成后触发。 7. **事件处理程序的...