在前端開(kāi)發(fā)中，我們經(jīng)常需要在網(wǎng)頁(yè)上動(dòng)態(tài)插入元素，這時(shí)候就需要把元素插入到特定的位置。而最常見(jiàn)的特定位置就是鼠標(biāo)所在的位置。在這里，我們將介紹如何使用JavaScript，在鼠標(biāo)位置插入元素。
一、通過(guò)鼠標(biāo)事件獲取位置
在JavaScript中，我們可以通過(guò)鼠標(biāo)事件獲取到鼠標(biāo)在網(wǎng)頁(yè)上的位置。最常用的鼠標(biāo)事件是“mousemove”，它會(huì)在鼠標(biāo)移動(dòng)時(shí)觸發(fā)。我們可以通過(guò)event對(duì)象，來(lái)獲取到鼠標(biāo)的坐標(biāo)。其中event.clientX代表鼠標(biāo)在視口中的X坐標(biāo)，event.clientY則代表鼠標(biāo)在視口中的Y坐標(biāo)。
document.addEventListener('mousemove', function(event) {
let x = event.clientX;
let y = event.clientY;
// 在這里調(diào)用插入元素的函數(shù)
});document.addEventListener('mousemove', function(event) {
let x = event.clientX;
let y = event.clientY;
let ele = document.createElement('div');
ele.style.position = 'absolute';
ele.style.left = x + 'px';
ele.style.top = y + 'px';
document.body.appendChild(ele);
});元素，但是還沒(méi)有什么實(shí)際意義。現(xiàn)在我們來(lái)完善這個(gè)效果。假設(shè)我們需要在鼠標(biāo)位置插入一張圖片。我們可以在js中創(chuàng)建一個(gè)![]()
元素，并為它設(shè)置src屬性，最后插入到頁(yè)面中。
document.addEventListener('mousemove', function(event) {
let x = event.clientX;
let y = event.clientY;
let img = document.createElement('img');
img.setAttribute('src', 'http://example.com/image.jpg');
img.style.position = 'absolute';
img.style.left = x + 'px';
img.style.top = y + 'px';
document.body.appendChild(img);
});