JS焦点事件和事件冒泡

焦点事件

JS中focus事件获得焦点，blur失去焦点，这些事件默认情况下只有表单可以触发，如果想让div等元素触发需要加tabindex属性

<div class="list" :class="{change:isclick}" @blur="listBlur" tabindex="-1">

当属性值为其他时候可以像其他表单一样用tab键切换，当属性值为-1时不能用tab切换
blur和focus不能事件冒泡

事件冒泡

在JS的事件中，如果子元素和父元素有相同的事件绑定，在触发绑定事件时会进行事件冒泡，从子元素逐层向上冒泡，但是有时候会不希望事件冒泡，所以JS提供了取消事件冒泡的方法

// w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true
        e.stopPropagation()
        console.log('取消冒泡');
        // e.cancelBubble = true

这样就不会出现事件冒泡了

手动跳转页面

虽然取消默认事件可以取消绑定的点击事件，但是对于a链接来说，默认的跳转事件不会受到取消默认事件的影响，添加的点击事件会受到取消默认事件的影响，基于这种特性，可以通过给a链接绑定点击事件手动跳转页面的方法实现a链接中子元素点击不跳转页面
1.在html中给a的herf属性赋值JavaScript:;，并且添加自定义属性代替herf保存跳转的目标

<a href="javascript:;" goal="https://www.bilibili.com/">

2.在JS中给a绑定点击事件，并且通过自定义属性获取跳转目标

window.location=this.getAttribute('goal')
// Javascript刷新页面的几种方法：
        // history.go(0)
        // location.reload()
        // location=location
        // location.assign(location)
        // document.execCommand('Refresh')
        // window.navigate(location)
        // location.replace(location)
        // document.URL=location.href
        // window.location=this.getAttribute('goal')