Javascript拖拽&拖放系列文章3之细说事件对象第1/4页

在阅读本文前，可以先阅读《Javascript拖拽&拖放系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性》这篇文章，以理清上下文关系。
好了，让我们开始进入正题。
模型相同的属性/方法
1 Button属性
Integer类型，可读可写。对于特定的鼠标事件，表示按下的鼠标按钮，它可以在拖拽的时候，判断是否是鼠标左键引发mousedown事件。它的所有取值及其意义（参考自《Javascript高级程序设计》）好了，让我们开始进入正题。
3.1 e/window.Event对象的属性/方法
3.1.1 IE事件模型和DOM事件如下：
0-未按下按钮
1-按下左键
2-按下右键
3-同时按下左右按钮
4-按下中键
5-按下左键和中键
6-按下右键和中键
7同时按下左中右键
mouseup的button属性返回的数值和mousedown事件中的完全一样。

注：在兼容DOM事件模型的所有浏览器中，0表示按下左键，数值1并不存在，2表示按下右键，对于非鼠标事件，返回“undefined”。

2 clientX、clientY属性
这两个属性的类型都是Integer，单位是像素，可读可写。分别表示相关事件发生时，鼠标在浏览器的客户端区域（不包括工具栏、滚动条等）的x坐标和y坐标。用一张图片来解释就再好不过了，请看：


图3.1：clientX和clientY属性

以下代码是一个非常简单的示例，它可以随时定位鼠标的坐标，并将结果显示在两个文本框中，如果愿意的话，你可以尝试运行它，兼容目前所有的现代浏览器。

示例代码1：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">


body{
         border:1px solid black;
        margin:0px;
       }
    </style>
    <script type="text/javascript" language="JavaScript">
    document.onmousemove=move;
    function move(e){
      if(!e)
      {
        e=window.event;
      }
      var xElement=document.getElementById("x");
      var yElement=document.getElementById("y");
      xElement.value=e.clientX;
      yElement.value=e.clientY;


}
    </script>
  </head>
  <body>
  <input type="text" id="x" value="" />
  <input type="text" id="y" value="" />
  </body>
</html>


3 type属性


当前1/4页 1234下一页阅读全文


您可能感兴趣的文章:


    

  • JavaScript实现网页对象拖放功能的方法
    • 

  • Java实现鼠标拖放功能的方法
    • 

  • Vue.js实现拖放效果的实例
    • 

  • javascript 拖放效果实现代码
    • 

  • JavaScript 拖放效果代码
    • 

  • JavaScript 图片放大镜（可拖放、缩放效果）
    • 

  • 基于jQuery实现的百度导航li拖放排列效果，即时更新数据库
    • 

  • 广泛收集的jQuery拖放插件集合
    • 

  • asp.net+jquery Gridview的多行拖放， 以及跨控件拖放
    • 

  • 脚本div实现拖放功能(两种)
    • 



Tags：Javascript 拖拽 拖放


相关文章


    

  • 2017-05-05纯原生js实现贪吃蛇游戏
    • 

  • 2013-06-06利用js 进行输入框自动匹配字符的小例子
    • 

  • 2017-06-06基于 webpack2 实现的多入口项目脚手架详解
    • 

  • 2012-12-12javascript的offset、client、scroll使用方法详解
    • 

  • 2009-09-09javascript 遮照层效果
    • 

  • 2017-03-03js实现下拉菜单效果
    • 

  • 2015-12-12JS控制按钮10秒钟后可用的方法
    • 

  • 2017-03-03bootstrap实现的自适应页面简单应用示例
    • 

  • 2017-08-08bootstrap modal+gridview实现弹出框效果
    • 

  • 2017-01-01javascript使用递归算法求两个数字组合功能示例
    • 



最新评论
赞 (0)

相关推荐

  • JavaScript 拖放效果代码

    这个程序的原型是在做图片切割效果的时候做出来的,那时参考了好几个同类的效果,跟muxrwc和BlueDestiny学习了不少东西. 虽然每次整理都觉得很好了,不过每隔一段时间又会发现得某个地方可以改善,某个地方有错误,某些需求需要实现,就像自己学习的知识那样. 这里考虑到有的人可能只需要简单的拖放,所以有一个简化版的拖放SimpleDrag,方便学习. 效果预览 ps:在maxthon下如果开启广告过滤的话很可能会被过滤掉(不知有什么方法可以避免). 程序说明 [程序原理] 这里以SimpleD

  • Vue.js实现拖放效果的实例

    Vue.js实现拖放效果的实例

    页面效果如下所示: 代码请看这里,当当当当: html: <template> <div class='drag-content'> <div class='project-content'> <div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div> </div>

  • JavaScript实现网页对象拖放功能的方法

    本文实例讲述了JavaScript实现网页对象拖放功能的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Drag</title> <meta http-equiv=

  • 脚本div实现拖放功能(两种)

    网页上有很多拖曳的操作,比如拖动树状列表,可拖曳的图片等. 1.原生拖放实现 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet"

  • JavaScript 图片放大镜（可拖放、缩放效果）第1/4页

    前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年"珍藏"的代码决定一尝所愿. 前言:这个程序主要分三部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单. 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西. 原理: [拖放程序] 基本原理很简单,不知道的看代码就明白,其中参考了越兔和BlueDestiny的相关文章. 下面说一下比较有用的地方: [范围限制]

  • 广泛收集的jQuery拖放插件集合

    广泛收集的jQuery拖放插件集合

    今天分享给大家一些非常棒的的jQuery插件拖放功能. 有了这些插件,你会允许你的访问者个性化的网站和它的工具,根据自己的需要,并以这种方式,你提供定制选项的负载展现方式 jQuery mb.containerPlus (演示 | 下载) 在建立功能齐全,完全可换肤的容器,这是一个有用的插件.容器可以设置拖动,调整大小,可折叠和可最小化. jQuery的卷轴插件 (演示 | 下载) 卷轴是一个jQuery插件,它需要一个图片标签,使现场的"投影"的预建动画帧序列.其目的是要提供360°

  • Java实现鼠标拖放功能的方法

    本文实例讲述了Java利用鼠标的拖放来实现交换程序数据的方法,即所谓的鼠标拖放功能.鼠标的拖放功能在图形化系统中非常常用,Java 提供了java.awt.dnd 和java.awt.datatransfer 包来支持该功能.本例演示如何在程序中实现拖放的实现方法,当在窗口上部的"Hello World!"标签点下鼠标,并拖至窗口下部的文本框放开,则在文本框中将添加"Hello World !"文本:继续上述过程,将继续添加该文本. 该程序功能具体的实现思路和方法为

  • 基于jQuery实现的百度导航li拖放排列效果，即时更新数据库

    index.php中 var autoSave = false; 控制不自动提交. index.php 复制代码 代码如下: <?php require 'db.php'; $query = "SELECT `id`,`order`,`name` FROM `limove` ORDER BY `order`"; $lis = mysql_query($query,$conn); $li_count = mysql_num_rows($lis); ?> <!DOCTYP

  • asp.net+jquery Gridview的多行拖放， 以及跨控件拖放

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="t

  • javascript 拖放效果实现代码

    有许多理由让你在页面中加入拖放的功能,其中最简单的理由是重新组织数据.举个例子,你可能希望用户能够重组一系列的页面元素,通过放置一个input或 select组件在各个元素的旁边来代表它们的顺序是一种解决方案,使该组元素可以被拖放是一种替代方案.或者也许你想在网站上拥有一个可以被用户移动的导航窗口.这些都是使用拖放功能的简单理由,因为你能够实现! 在你的网页上实现拖放的效果并不是很复杂.首先,我们知道鼠标的位置,然后我们需要了解用户什么时候点击一个元素,以至于我们知道要准备开始拖动它,最后我们要

随机推荐