mirror of
https://github.com/puppeteer/puppeteer
synced 2024-06-14 14:02:48 +00:00
98ee35655f
This patch: - adds Mouse class which holds mouse state and implements mouse primitives, such as moving, button down and button up. - implements high-level mouse api, such as `page.click` and `page.hover`. References #40, References #89
63 lines
1.7 KiB
JavaScript
63 lines
1.7 KiB
JavaScript
// This injects a box into the page that moves with the mouse;
|
|
// Useful for debugging
|
|
(function(){
|
|
let box = document.createElement('div');
|
|
box.classList.add('mouse-helper');
|
|
let styleElement = document.createElement('style');
|
|
styleElement.innerHTML = `
|
|
.mouse-helper {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: rgba(0,0,0,.4);
|
|
border: 1px solid white;
|
|
border-radius: 10px;
|
|
margin-left: -10px;
|
|
margin-top: -10px;
|
|
transition: background .2s, border-radius .2s, border-color .2s;
|
|
}
|
|
.mouse-helper.button-1 {
|
|
transition: none;
|
|
background: rgba(0,0,0,0.9);
|
|
}
|
|
.mouse-helper.button-2 {
|
|
transition: none;
|
|
border-color: rgba(0,0,255,0.9);
|
|
}
|
|
.mouse-helper.button-3 {
|
|
transition: none;
|
|
border-radius: 4px;
|
|
}
|
|
.mouse-helper.button-4 {
|
|
transition: none;
|
|
border-color: rgba(255,0,0,0.9);
|
|
}
|
|
.mouse-helper.button-5 {
|
|
transition: none;
|
|
border-color: rgba(0,255,0,0.9);
|
|
}
|
|
`;
|
|
document.head.appendChild(styleElement);
|
|
document.body.appendChild(box);
|
|
document.addEventListener('mousemove', event => {
|
|
box.style.left = event.pageX + 'px';
|
|
box.style.top = event.pageY + 'px';
|
|
updateButtons(event.buttons);
|
|
}, true);
|
|
document.addEventListener('mousedown', event => {
|
|
updateButtons(event.buttons);
|
|
box.classList.add('button-' + event.which);
|
|
}, true);
|
|
document.addEventListener('mouseup', event => {
|
|
updateButtons(event.buttons);
|
|
box.classList.remove('button-' + event.which);
|
|
}, true);
|
|
function updateButtons(buttons) {
|
|
for (let i = 0; i < 5; i++)
|
|
box.classList.toggle('button-' + i, buttons & (1 << i));
|
|
}
|
|
})();
|