javascript

记录一些平时使用的小技巧

DOM

获取最近的父元素

childDom.closest('.section');

Event

传播

最常用的是两种。1：阻止父元素触发子元素的事件，2：阻止子元素触发父元素的事件。

阻止父元素

parentDom.addEventListener('click', (e) => {
	// something，不会执行
})

childDom.addEventListener('click', (e) => {
	// 停止传播
	e.stopPropagation();
})

阻止子元素

parentDom.addEventListener('click', (e) => {
	// 停止传播
	e.stopPropagation();
}, true)

childDom.addEventListener('click', (e) => {
	// something，不会执行
})

target

target 为最内层的元素。与 MouseEvent.x 类似的属性也是依据 target 元素，即便是阻止了事件的向下传播。currentTarget 为真正触发事件的元素。

js

document.getElementById('parent').addEventListener('click', (e) => {
	console.dir(e.target)
    // div#child
})

document.getElementById('parent').addEventListener('wheel', function (e){
	event.stopPropagation();
	console.dir(e.target)
	// div#child
}, true)

html

<div id="parent">
    <div id="child"></div>
</div>

Object

对象属性批量赋值

从接口获取的对象，批量赋值于 vue reactive 对象

const pet = reactive({
    id: null,
    name: null
})

async function load(){
	const r = await apiGet();
	Object.assign(pet, r.data);
}