html中模拟光标悬停事件,HTML5鼠标事件模拟测试器

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

const $logger = document.querySelector('.logger')

const $mouse = document.querySelector('.mouse')

const log = (msg) => {

const shouldScroll = $logger.scrollHeight - $logger.scrollTop <= $logger.offsetHeight

$logger.innerHTML += `> ${msg}
`

if (shouldScroll) {

$logger.scrollTop = $logger.scrollHeight

}

}

const press = (type) => {

log(`${type} mouse button pressed`)

$mouse.classList.add(type)

}

const release = (type) => {

log(`${type} mouse button released`)

$mouse.classList.remove(type)

}

document.addEventListener('mousedown', (event) => {

switch (event.button) {

case 0:

press('left')

break;

case 1:

press('middle')

event.preventDefault()

event.stopPropagation()

return false

break;

case 2:

press('right')

break;

default:

log('Unknown mouse button pressed')

}

})

document.addEventListener('mouseup', (event) => {

switch (event.button) {

case 0:

release('left')

break;

case 1:

release('middle')

break;

case 2:

release('right')

break;

default:

log('Unknown mouse button released')

}

})

document.addEventListener('wheel', (event) => {

if (event.deltaY !== 0) {

log(event.deltaY < 0 ? 'scroll wheel up' : 'scroll wheel down')

} else if (event.deltaX !== 0) {

log(event.deltaX < 0 ? 'scroll wheel left' : 'scroll wheel right')

}

})

document.querySelector('.log button').addEventListener('click', function () {

$logger.innerHTML = ''

})

document.addEventListener('contextmenu', (e) => {

e.preventDefault()

e.stopPropagation()

return false

})

log('Initializing logger....')