• js笔记


    一、判断鼠标的移动方向
    function Start() {
      stage.addEventListener(MouseEvent.MOUSE_MOVE, CheckDirection);
    }
    Start();
    var prevX=0;
    var prevY=0;
    var curX=0;
    var curY=0;
      
    var dirX:String="";
    var dirY:String="";
    function CheckDirection(e:MouseEvent) {
      trace("X movement: " + GetHorizontalDirection() + ", Y movement: " + GetVerticalDirection());
      e.updateAfterEvent();
    }
    function GetHorizontalDirection():String {
      prevX=curX;
      curX=stage.mouseX;
      if (prevX>curX) {
        dirX="left";
      } else if (prevX < curX) {
        dirX="right";
      } else {
        dirX="none";
      }
      return dirX;
    }
    function GetVerticalDirection():String {
      prevY=curY;
      curY=stage.mouseY;
      if (prevY>curY) {
        dirY="up";
      } else if (prevY < curY) {
        dirY="down";
      } else {
        dirY="none";
      }
      return dirY;
    }
    二、onmouseleave与onmouseout区别
     

    1、onmouseleave、onmouseenter,鼠标进入到指定元素区域内触发事件,不支持冒泡,不包含子元素的区域。

    2、onmouseout、onmouseover、鼠标进入指定元素触发事件,含子元素区域。

    附加:jQuery中的子元素选择器find与children区别。

    find是筛选出当前元素下的所有(儿子元素,孙子元素等)符合条件的元素。

    children是筛选出当前元素下的直接子元素(儿子元素)。

    三、onmouseover和onmouseenter区别

    onmouseover和onmouseenter都是鼠标进入时触发,onmouseover在所选元素的子元素间切换的时候也触发!

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
    border: 1px solid #aaa;
    margin: 20px;
    }
    </style>
    </head>
    <body>
    <div id="d1">
    AA
    <p>BB</p>
    CC
    </div>
    <div id="d2">
    AA
    <p>BB</p>
    CC
    </div>

    <script>
    var counter1 = 0
    d1.onmouseover = function(){
    counter1++;
    console.log('COUNTER1:'+counter1);
    }
    //mouseover在子元素间切换时也会触发

    var counter2 = 0
    d2.onmouseenter = function(){
    counter2++;
    console.log('COUNTER2:'+counter2);
    }
    </script>
    </body>
    </html>
    四、事件

    JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。

    网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

    事件举例:

    • 鼠标点击
    • 页面或图像载入
    • 鼠标悬浮于页面的某个热点之上
    • 在表单中选取输入框
    • 确认表单
    • 键盘按键

    注意:事件通常与函数配合使用,当事件发生时函数才会执行。

    五、鼠标的横、纵坐标

    var x , y;
     

    //当需求为获得的坐标值相对于body时,用:

    function positionBody(event){

        event = event||window.event;

        //获得相对于body定位的横标值;

        x=event.clientX

        //获得相对于body定位的纵标值;

        y=event.clientY

    }

    //当需求为获得的坐标值相对于某一对象时,用:

    function positionObj(event,id){

        //获得对象相对于页面的横坐标值;id为对象的id

        var thisX = document.getElementById(id).offsetLeft;

        //获得对象相对于页面的横坐标值;

        var thisY = document.getElementById(id).offsetTop;

        //获得页面滚动的距离;

        //注:document.documentElement.scrollTop为支持非谷歌内核;document.body.scrollTop为谷歌内核

        var thisScrollTop = document.documentElement.scrollTop + document.body.scrollTop;

        event = event||window.event;

        //获得相对于对象定位的横标值 = 鼠标当前相对页面的横坐标值 - 对象横坐标值;

        x = event.clientX - thisX;

        //获得相对于对象定位的纵标值 = 鼠标当前相对页面的纵坐标值 - 对象纵坐标值 + 滚动条滚动的高度;

        y = event.clientY - thisY + thisScrollTop;

    }

    六、鼠标的相对、绝对位置

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8"/>
    <title>位置</title>
    <script language="javascript" type="text/javascript">
    function m(){
    document.getElementById("area").innerHTML=event.clientX +" , "+event.clientY;
    }
    function c(){
     var objTop = getOffsetTop(document.getElementById("d"));//对象x位置
     var objLeft = getOffsetLeft(document.getElementById("d"));//对象y位置
     var mouseX = event.clientX+document.body.scrollLeft;//鼠标x位置
     var mouseY = event.clientY+document.body.scrollTop;//鼠标y位置
    //计算点击的相对位置
     var objX = mouseX-objLeft;
     var objY = mouseY-objTop;
     clickObjPosition = objX + "," + objY;
     alert(clickObjPosition);
    }
    function getOffsetTop(obj){
      var tmp = obj.offsetTop;
      var val = obj.offsetParent;
      while(val != null){
        tmp += val.offsetTop;
        val = val.offsetParent;
      }
      return tmp;
    }
    function getOffsetLeft(obj){
      var tmp = obj.offsetLeft;
      var val = obj.offsetParent;
      while(val != null){
        tmp += val.offsetLeft;
        val = val.offsetParent;
      }
      return tmp;
    }
    </script>
    </head>
    <body style="margin:0px;" onmousemove="m();">
    <div style="padding:90px;border:1px solid #ccc;font-size:36px;800px;height:800px;"> </div>
    <div id="area"></div>
    <div style="1400px;height:300px;border:1px solid red;padding-left:1200px;">
     <div id="d" style="200px;height:200px;border:1px solid green;padding:10px;cursor:hand;" onclick="c()">这里是图片,因为我用div边框1px,所以两个div会有2px的位置偏移,你可以自己调整</div>
    </div>
    </body>
    </html>
  • 相关阅读:
    将aspx页面编译成dll
    Jquery 验证数字
    c#反编译生成DLL过程
    c#进制转换
    Spring Mvc 实例
    wamp phpMyAdmin error #1045
    Tomcat相关知识点总结(jsp)
    Java ---学习笔记(泛型)
    Java IO ---学习笔记(文件操作与随机访问文件)
    Java IO ---学习笔记(字符流)
  • 原文地址:https://www.cnblogs.com/lzy666/p/7096991.html
Copyright © 2020-2023  润新知