JavaScript学习(二十三)——编辑事件(复制、剪切、粘贴、拖动)

   日期:2024-12-26    作者:k80bv 移动:http://ljhr2012.riyuangf.com/mobile/quote/48570.html

编辑事件是在浏览器中的内容被修改或移动时所执行的相关事件哎,主要是对浏览器中被选择的内容进行复制、剪切、粘贴时的触发事件,以及在用鼠标拖动对象时所触发的一系列事件的集合。

文本编辑事件是对浏览器中的内容进行复制、剪切、粘贴和选择时所触发的事件。

代码

注意
如果在onbeforecopy和oncopy事件中调用的是自定义函数名,那么,必须在函数名的前面加retum语句;否则,不论在函数中返回的是true,还是false,当前事件所返回的值一律是true 值,也就是允许复制。

其实,要是想屏蔽网页中的复制功能,可以直接在<body>标记的onbeforecopy或oncopy事件中用JavaScript语句来实现。代码如下:

 

剪切事件是在浏览器中剪切被选中的内容时触发事件处理程序,剪切事件有onbeforecut和oncut两个事件,onbeforecut事件是当页面中的一.部分或全部内容被剪切到浏览者系统剪贴板时触发事件处理程序,oncut事件是当页面中被选择的内容被剪切时触发事件处理程序。
例子:屏蔽在文本框中进行剪切的操作

 

粘贴事件有onbeforepaste和onpaste。

onbeforepaste事件是将内容从浏览者的系统剪贴板中粘贴到页面上时所触发的事件处理程序。可以利用该事件避免浏览者在填写信息时,对验证信息进行粘贴,如密码文本框和确定密码文本框中的信息。

例子:在向文本框粘贴文本时,利用onbeforepaste事件来清空剪贴板,使其无法向文本框中粘贴数据。

 

 在JavaScript中有两种方法可以实现拖放功能,即系统拖放和模拟拖放。微软为IE提供的拖放事件有两类,类是拖放对象事件, 另类是放置目标事件。下面对这两类所包含的事件进行说明。

1.拖放对象事件

拖放对象事件包含ondrag、ondragend 和ondragstart事件。

ondrag事件是当某个对象被拖动时触发事件处理程序。

ondragend 事件是当鼠标拖动结束时触发事件处理程序,也就是鼠标的按钮被释放时触发该事件。

ondragstart 事件是当某对象将被拖动时触发事件处理程序,也就是当鼠标按下,开始移动鼠标时触发该事件。
 例如,在图片被拖动时,在窗口的标题栏中显示图片拖动的状态。也就是在将要拖动图片时,在标题栏中显示dragstart;在拖动图片时,在标题栏中显示drag:在拖动结束时,在标题栏中显示dragend。

注意

在对对象进行拖动时,- 一般都要使用ondragend事件,用来结束对象的拖动操作。

 

2.放置目标事件

放置目标事件包含ondragover、ondragenter、 ondragleave 和ondrop事件。

ondragover事件是当某个被拖动的对象在另一对象容器范围内拖动时触发事件处理程序。

ondragenter事件是当对象被鼠标拖动进入其容器范围内时触发事件处理程序。

ondragleave事件是当鼠标拖动的对象离开其容器范围内时触发事件处理程序,也就是当dragover停止触发,对象被拖出放置目标时,触发该事件。

ondrop事件是在一个拖动过程中,释放鼠标时触发事件处理程序,也就是被拖动的对象在其他容器上松开鼠标时,触发drop事件而不是dragleave事件。

例子:放置目标事件的简单实例


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号