鼠标事件

一.

在jQuery中触发鼠标事件有六种方法,分别是:click(单击事件),dbclick(双击事件),mousedown(鼠标按下事件),mouseup(鼠标弹起事件),mouseenter(鼠标移入事件),mouseleave(鼠标移出事件)

二.

现拖放操作设计需要解决以下几个问题。

  • 定义拖放元素为绝对定位以及设计事件的响应过程,这个比较容易实现。
  • 清楚几个坐标概念:按下鼠标时的指针坐标,移动中当前鼠标指针坐标,松开鼠标时的指针坐标,拖放元素的原始坐标,拖动中的元素坐标。

算法设计:按下鼠标时,获取被拖放元素和鼠标指针的位置,在移动中实时计算鼠标偏移的距离,并利用该偏移距离加上被拖放元素的原坐标位置,获得拖放元素的实时坐标。

三  例子展示

 const brand = document.getElementById('brand')
    brand.onmousemove = function () {
        brand.style.border="2px solid  darkred"
    }
    brand.onmouseleave=function(){
        brand.style.border="2px solid #b0b0b0"
    }

  

上一篇:28.class之子类对父类方法的重写


下一篇:时序/组合逻辑