完成拖拽事件:

 

集训第四天--复习JavaScript--(拖拽,键盘,移动端事件)

 

如何让鼠标位于被拖拽元素的中心(完美的一种方式)

集训第四天--复习JavaScript--(拖拽,键盘,移动端事件)

当我们拖拽网页中的内容时,浏览器会默认去搜索引擎中搜索内容

此时会导致拖拽功能的异常,这个时浏览器提供的默认行为

如果不希望发生这个行为,那么可以使用 return false 来取消默认行为

但是这一招对IE8不管用

对于IE8 设置鼠标所有的捕获事件 使用 作用对象.setCapture()方法(只有IE支持,用火狐不报错,但是在chrome中会包错,从而阻断后面的代码执行) 但是当鼠标抬起的时候 div还是会进行移动 所以后面的在鼠标抬起的事件中设置 作用对象.releaseCapture()

setCapture()方法(只有IE支持,用火狐不报错,但是在chrome中会包错,从而阻断后面的代码执行)  --解决方法?

加上 obj.setCapture && obj.setCapture()

和 obj.releaseCapture && obj.releaseCapture();

这两行代码即可。

最后附上完美的实现拖拽事件的源码(最后的时候最好加上 return false)

集训第四天--复习JavaScript--(拖拽,键盘,移动端事件)

滚轮事件

    nomousewheel 是一个鼠标滚轮滚动的事件,在滚轮滚动的时候触发
              但是在火狐当中不支持该属性

在火狐中要使用DOMMouseScroll 来绑定滚动事件 但是该事件要通过addEventListener()来进行绑定

集训第四天--复习JavaScript--(拖拽,键盘,移动端事件)

 

判斷鼠標滾輪的方向
//                      alert(event.wheelDelta)
//                      向上是180px 向下 是-180 px 判断的时候不看大小 只看正负
//                     在火狐中不支持这个属性

在火狐中:使用下面函数 来获取滚动的方向

(event.detail)

集训第四天--复习JavaScript--(拖拽,键盘,移动端事件)

当滚轮滚动时,如果浏览器由滚动条,则滚动条会跟随着滚动 这是浏览器的默认行为,如果不希望发生,则可以取消默认行为

加上一个 return false

但是使用addEventListener()方法绑定响应哈纳树,取消默认行为时不能return false

需要使用event 来 取消默认行为

event.preventDefault() 但是IE8不支持 如果直接调用会报错 所以要这么写

event.preventDefault&& event.preventDefault()

键盘事件

键盘事件一般都会绑定给能够获取焦点的对象或者时document对象,div不能被绑定

onkeydown 事件 如果一直按着 那么函数会一直被触发

当连续触发时,第一次和第二次之间的间隔会长一点时间,是为了防止误操作的发生

可以通过keyCode来获取当前按下键的编码

集训第四天--复习JavaScript--(拖拽,键盘,移动端事件)

BOM

浏览器对象模型 BOM可以通过js来操作浏览器,在BOM中我们提供了一组对象,用来完成浏览器的操作

BOM对象

window  代表浏览器的整个窗口,同时Window也是网页中的全局对象

Navigator 代表当前浏览器的信息,但通过该对象可以用来识别不同的浏览器

Location 代表当前浏览器的地址栏信息,或者操作浏览器跳转页面

History 操作浏览器的历史记录 由于隐私作用不能访问具体的,只能操作浏览器向前或者向后翻页的记录 只在当次访问有效

Screen 代表用户的屏幕信息,可以通过该对象获取到用户的显示器相关许欸信息,而且只在当次访问有效

这些BOM对象在浏览器都是作为window对象的属性保存的,可以通过window对象来使用,也可以直接使用。

 定时器

setInterval()定时调用 每隔一段时间执行一次,参数:1.回调函数,该函数每隔一段实际按会被调用一次,每次调用间隔的时间,单位时毫秒

clearInterval()关闭定时器

每次点击一次按钮就会开启多个定时器,这就导致图片切换的速度过快

并且我们只能关闭最后一次开启的定时器

在开启定时器之前,需要将当前元素上的其他定时器关闭

所以在开始第一次定时器之前,就关闭一次定时器。

延时调用 

延时调用指的是 一个函数不马上执行,而是隔一段时间以后再调用,而且只会执行一次

延时调用和定时调用的区别,定时调用会执行多个,而延时调用只会执行一次

setTimeout() 和clearTimeout()

延时调用和定时调用实际上是可以相互代替的,在开发中可以根据自己的需要去选择。

类的操作

通过style属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次

这样的执行性能是比较差的,

function addClass(obj,cn){}

function hasClass(obj,cn){}

用来切换一个类

function toggleClass(obj,cn){}

移动端的事件

触屏事件

 touchstrat  是一个事件对象, 当手机触摸元素的时候触发。

   touches 正在触摸屏幕的所有的手指列表

   targetTouches 正在触摸当前DOM元素 如果监听

touchmove  当手指在元素滑动时触发。

touchend 手指离开时候的事件

classList属性是一个HTML5新增的一个属性,返回元素的类名,但是IE10以上的版本支持

该元素用于在元素中添加,移除以及切换css类,有以下方法

1.添加类名 但是在后面追加的类名不会覆盖以前的类名

  div.classList.add('three')

2.移除某一个类名

div.classList.remove('three’)

3.切换一个类名

div.classList.toggle('bg')

 

 

 

 

 

 

 

相关文章:

  • 2021-09-19
  • 2022-12-23
  • 2022-12-23
  • 2021-11-28
  • 2021-11-28
  • 2021-08-22
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-28
  • 2021-11-28
  • 2021-11-28
  • 2021-11-28
相关资源
相似解决方案