精华内容
下载资源
问答
  • js鼠标点击事件

    千次阅读 2013-01-24 10:22:09
    Window.event对象代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。  Window.event对象只在事件发生的过程中才有效。  Window.event的某些属性只对特定的事件有意义。比如,...

    IE 
    左键是 window.event.button = 1 
    右键是 window.event.button = 2
    中键是 window.event.button = 4
    没有按键动作window.event.button = 0

    Firefox 
    左键是 event.button = 0 
    右键是 event.button = 2
    中键是 event.button = 1 
    没有按键动作 event.button = 0

    Opera 7.23/7.54
    鼠标左键是 window.event.button = 1
    没有按键动作 window.event.button = 1 
    右键和中键无法获取

    Opera 7.60/8.0
    鼠标左键是 window.event.button = 0
    没有按键动作 window.event.button = 0
    右键和中键无法获取

    另外:屏蔽右键的是window.event.button = 3

    ************************************************************

    Window.event对象代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 
    Window.event对象只在事件发生的过程中才有效。 
    Window.event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 
    如果事件触发后,鼠标移出窗口外,则返回的值为 -1 ,这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

    Event对象的属性有:
    altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y

     
    下面简单的描述一下它的这些属性:
    1.altKey 
    描述: 检查alt键的状态。
    语法: event.altKey
    可能的值: 当alt键按下时,值为 TRUE ,否则为 FALSE 。只读。

    2.button 
    描述: 检查按下的鼠标键。
    语法: event.button
    可能的值: 
    0 没按键 ;1 按左键 ;2 按右键 ;3 按左右键 ;4 按中间键 ;5 按左键和中间键 ;6 按右键和中间键 ;7 按所有的键
    这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件,不管鼠标状态如何,都返回 0(比如onclick)。

    3.cancelBubble  
    描述: 检测是否接受上层元素的事件的控制。
    语法: event.cancelBubble[ = cancelBubble]
    可能的值: 这是一个可读写的布尔值
    TRUE 不被上层原素的事件控制。 
    FALSE 允许被上层元素的事件控制。这是默认值。
     
    4.clientX 
    描述: 返回鼠标在窗口客户区域中的X坐标。
    语法: event.clientX
    注释: 这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。
     
    5.clientY 
    描述: 返回鼠标在窗口客户区域中的Y坐标。
    语法: event.clientY
    注释: 这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。
     
    6.ctrlKey 
    描述: 检查ctrl键的状态。
    语法: event.ctrlKey
    可能的值: 当ctrl键按下时,值为 TRUE ,否则为 FALSE 。只读。
     
    7.fromElement 
    描述: 检测 onmouseover 和 onmouseout 事件发生时,鼠标所离开的元素。 参考18.toElement
    语法: event.fromElement
    注释: 这是个只读属性。
     
    8.keyCode 
    描述:检测键盘事件相对应的内码。 这个属性用于 onkeydown, onkeyup, 和 onkeypress 事件。
    语法: event.keyCode[ = keyCode]
    可能的值: 这是个可读写的值,可以是任何一个Unicode键盘内码。如果没有引发键盘事件,则该值为 0 。

    9.offsetX 
    描述: 检查相对于触发事件的对象,鼠标位置的水平坐标
    语法: event.offsetX
     
    10.offsetY 
    描述: 检查相对于触发事件的对象,鼠标位置的垂直坐标
    语法: event.offsetY
     
    11.propertyName 
    描述: 设置或返回元素的变化了的属性的名称。
    语法: event.propertyName [ = sProperty ]
    可能的值: sProperty 是一个字符串,指定或返回触发事件的元素在事件中变化了的属性的名称。
    注释:这个属性是可读写的。无默认值。你可以通过使用 onpropertychange 事件,得到 propertyName 的值。
     
    12.returnValue 
    描述: 设置或检查从事件中返回的值
    语法: event.returnValue[ = Boolean]
    可能的值: true 事件中的值被返回 
    false 源对象上事件的默认操作被取消

    13.screenX 
    描述: 检测鼠标相对于用户屏幕的水平位置 
    语法: event.screenX
    注释: 这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

    14.screenY 
    描述: 检测鼠标相对于用户屏幕的垂直位置
    语法: event.screenY
    注释: 这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。
     
    15.shiftKey 
    描述: 检查shift键的状态。
    语法: event.shiftKey
    可能的值: 当shift键按下时,值为 TRUE ,否则为 FALSE 。只读。

    16.srcElement 
    描述: 返回触发事件的元素。只读。例子见本文开头。
    语法: event.srcElement
     
    17.srcFilter 
    描述: 返回触发 onfilterchange 事件的滤镜。只读。
    语法: event.srcFilter

    18.toElement 
    描述: 检测 onmouseover 和 onmouseout 事件发生时,鼠标所进入的元素。 参考7.fromElement
    语法: event.toElement
    注释: 这是个只读属性。
     
    19.type 
    描述: 返回事件名。
    语法: event.type
    注释: 返回没有“on”作为前缀的事件名,比如,onclick事件返回的type是click 只读。

    20. x 
    描述: 返回鼠标相对于css属性中有position属性的上级元素的x轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。
    语法: event.x
    注释: 如果事件触发后,鼠标移出窗口外,则返回的值为 -1  
    这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。
     
    21. y 
    描述: 返回鼠标相对于css属性中有position属性的上级元素的y轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。
    语法: event.y

    展开全文
  • 这篇文章主要介绍了JS鼠标3次点击事件实现及扩展思路,需要的朋友可以参考下这几天看了一下JavaScript高级程序设计中的Dom事件相关内容,同时看到网上有关鼠标多次点击事件,鼠标事件是简单、常用的事件之一,于是便...

    这篇文章主要介绍了JS鼠标3次点击事件实现及扩展思路,需要的朋友可以参考下

    这几天看了一下JavaScript高级程序设计中的Dom事件相关内容,同时看到网上有关鼠标多次点击事件,鼠标事件是简单、常用的事件之一,于是便针对点击事件进行一些小的扩展和实现,增强对Dom事件的进一步理解。其中的实现和思路是自己总结的,有什么不对的地方还请大神们交流指正。

    1、制作一个通用的事件处理模块(原生实现)

    以下实现基于AMD定义模块方式:/**

    * 浏览器兼容事件处理组件

    */

    define(function () {

    var EventUtil = {

    // 添加事件监听

    addHandler: function (element, type, handler) {

    if (element.addEventListener) {

    element.addEventListener(type, handler, false);// DOM2级事件

    } else if (element.attachEvent) {

    element.attachEvent('on' + type, handler);// DOM2级IE事件

    } else {

    element['on' + type] = handler;// DOM0级事件

    }

    },

    // 移除事件监听

    removeHandler: function (element, type, handler) {

    if (element.removeEventListener) {

    element.removeEventListener(type, handler, false);

    } else if (element.detachEvent) {

    element.detachEvent('on' + type, handler);

    } else {

    element['on' + type] = null;

    }

    },

    // 获取事件对象

    getEvent: function (event) {

    return event ? event : window.event;

    },

    // 获取事件的目标元素

    getTarget: function (event) {

    return event.target || event.srcElement;

    },

    // 禁止事件默认行为

    preventDefault: function (event) {

    if (event.preventDefault) {

    event.preventDefault();

    } else {

    event.returnValue = false;

    }

    },

    // 禁止事件冒泡

    stopPropagation: function (event) {

    if (event.stopPropagation) {

    event.stopPropagation();

    } else {

    event.cancelBubble = true;

    }

    }

    };

    return EventUtil;

    });

    2、鼠标3击事件实现

    鼠标点击事件涉及的事件及执行触发顺序:

    mousedown:鼠标任意键按下时触发

    mouseup:释放鼠标按钮时触发

    click:单击

    mousedown

    mouseup

    dblclick:双击

    显然,click是依赖dblclick的,可以考虑根据这两个事件实现鼠标3次连续点击触发执行,设计触发dblclick后监听click事件,如果在短时间内触发了click事件,则构成鼠标连续点击3次的效果,具体实现如下源码:

    鼠标3击

    js 代码require(['eventUtil'], function (EventUtil) {

    var button = document.getElementById('button');

    click3Event(button, function (event) {

    console.log('3 click');

    });

    // 鼠标3击事件

    function click3Event(dom, fn) {

    var handler = function (event) {

    var event = EventUtil.getEvent(event),

    target = EventUtil.getTarget(event);

    var handler = function (event) {

    var event = EventUtil.getEvent(event),

    target = EventUtil.getTarget(event);

    EventUtil.removeHandler(target, 'click', handler);

    // 执行内容

    fn();

    };

    EventUtil.addHandler(target, 'click', handler);

    // 为防止双击后较长时间再次单击执行事件

    setTimeout(function () {

    EventUtil.removeHandler(target, 'click', handler);

    }, 300);

    };

    EventUtil.addHandler(dom, 'dblclick', handler);

    }

    3、鼠标n击事件实现

    由鼠标3击事件联想到,如果实现n次鼠标连击事件触发如何实现。想到的思路是:禁用目标对象的dblclick事件,只用click事件进行连续点击的逻辑判断和操作,在连续的短时间内满足点击n次即可触发执行,否则重新计算累加次数。具体的实现代码如下:require(['eventUtil'], function (EventUtil) {

    var button = document.getElementById('button');

    nclickEvent(4, button, function (event, n) {

    console.log(n + ' click');

    });

    function nclickEvent (n, dom, fn) {

    // 禁止双击事件

    EventUtil.removeHandler(dom, 'dblclick', null);

    var n = parseInt(n) < 1 ? 1 : parseInt(n),

    count = 0,

    lastTime = 0;

    var handler = function (event) {

    var currentTime = new Date().getTime();

    count = (currentTime - lastTime < 300) ? count + 1 : 0;

    lastTime = new Date().getTime();

    if (count >= n - 1) {

    fn(event, n);

    count = 0;

    }

    };

    EventUtil.addHandler(dom, 'click', handler);

    }

    });

    最后给大家分享一个jquery版的代码

    Document

    234234234234234

    (function(){

    var num=0,d=null;

    $('#box').click(function(){

    if(d){clearTimeout(d)}

    d=setTimeout(function(){

    num=0

    },200);

    num++;

    if(num>=3){

    alert(num+"\n ok")

    }

    })

    })();

    到此文章就结束了,大家可以根据需要选择自己想用的代码。

    展开全文
  • 小程序点击事件改变样式(普通js鼠标点击事件) 1.wxml中 推荐 热门 分类 2.js中 data{ num:1 } bindChoice:function(e){ console.log(e); this.setData({ num:e.target.dataset.num }) }...

    小程序点击事件改变样式(普通js鼠标点击事件) 1.wxml中

    推荐热门分类 2.js中 data{ num:1 } bindChoice:function(e){ console.log(e); this.setData({ num:e.target.dataset.num }) }
    展开全文
  • 段代码是用来做,点击一个按纽打开个div,在页面空白处点击鼠标隐藏这个div
  • 各个主流浏览器德鼠标点击事件,方便使用时查询,整理还算是很详细吧,感兴趣的你可以参考下啊,希望本文对你有所帮助
  • body{ pointer-events:none; }
    body{
    	pointer-events:none;
    }
    
    展开全文
  • {"optioninfo":{"dynamic":"true","static":"true"},... 产品功能 提供完善的资源管理能力 支持多种类型的事件源,包括管控流事件以及数据流事件 支持多种类型的事件目标处理,满足不同场景的事件处理需求
  • <SCRIPT type="text/javascript"> <!-- function searchBook(){ var searchType = ""; for (i=0;... var searchDescribe = document.getElementById("searchDescribeID").value;...
  • [img=https://img-bbs.csdn.net/upload/201701/01/1483204965_370280.png][/img]希望各位大佬帮忙解决一下。
  • js鼠标点击事件

    2019-08-06 21:05:56
    鼠标点击事件小结: onclick:点击事件 ondblclick:双击事件(必然会触发单击事件); onmouseover:鼠标移入; onmouseout:鼠标移出; onmouseenter:鼠标移入; onmouseleave:鼠标移出; onmousemove:鼠标在...
  • 具体需要实现的效果,如下:这里演示的操作都没有点击动作,全部是鼠标滑入滑出效果。click事件实现这个功能是很简单的,毕竟常用。但是为了1:1还原效果,所以是要用鼠标滑入滑出事件。mouseover 和 mouseout,...
  • 下面是两处与js鼠标点击事件中URL相关的代码: var btnEdit='<a href="javascript:;" onclick="Index.edit(\'ID\')" class="btn btn-link" style="padding:0px 6px">编辑</a>'; edit : function(id)...
  • three.js监听鼠标点击事件

    千次阅读 2020-06-18 16:50:53
    优化了好几次的threejs鼠标点击事件,直接上代码。 // 监听鼠标点击事件 展示详情页面 const onMouseClick = (event) => { let raycaster = new THREE.Raycaster() let mouse = new THREE.Vector2() // 通过...
  • JS控制鼠标点击事件

    2016-08-13 14:26:00
    鼠标点击事件就是当鼠标点击元素时,就会出现另一个窗口,类似于百度首页中右上角的“登录”这个按钮,当鼠标点击 登录时,就会出现登录窗口。大体的意思就是这样,直接上代码了,简单易懂。  <!DOCTYPE ...
  • js鼠标右键点击事件

    千次阅读 2019-10-22 10:26:06
    方法一 首先取消右键的系统默认弹窗 document.oncontextmenu = function...用onmouseup或者onmousedown代替点击事件 onclick事件无法用e.button判断鼠标左右键。 document.onmouseup = function(e){ if(e.butt...
  • js 模拟鼠标点击事件

    2013-12-04 22:19:24
    直接上原代码:<!DOCTYPEhtml> <htmllang="en"xmlns="http://www.w3.org/1999/xhtml"> <head> <metacharset="utf-8"/> <title>JS模拟鼠标点击事件</title...
  • js触发点击事件--模拟鼠标点击动作

    万次阅读 2018-08-24 11:12:55
    大部分都是鼠标直接点击事件click 但是有时候需要有默认,比如初始化的时候就默认点击第一行 这时候就得模拟点击事件了 但是模拟点击事件的前提是,你已经定义了这个click事件     $('.js-btnHistory') ....
  • JS鼠标点击事件

    2014-12-02 09:45:40
    点击事件var n=0;点击事件示范
  • js模拟鼠标点击事件(事件触发)

    千次阅读 2014-05-27 17:30:45
    在工作中遇到一个需要用js模拟鼠标点击事件。主要用到了js中的onclick事件。其中ie跟ff有异同。需要做兼容才行。
  • Js 模拟鼠标点击事件

    2017-07-25 18:46:00
    var obj = document.getElementById('go'); if(document.all){ obj.click(); }else{ var e = document.createEvent('MouseEvents'); e.initEvent('click', true, true); obj.dispatchEvent(e);... ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,516
精华内容 1,006
关键字:

js鼠标点击事件