场景:
在网上浏览Javascript Custom Events的解决方案时,我找不到任何实际的例子,甚至MDN资源也很有限。
我正在尝试重建 paperjs' onMouseDrag event .我的预期用途是用于类似绘画的网络应用程序。
onMouseDrag 事件在以下情况下触发:
- 鼠标左键按下
- 鼠标在移动
目标:
这里的目标是不有一个有效的 onMouseDrag
事件。目标是对如何创建 CustomEvent
进行清晰的解释和示例。 onMouseDrag
事件仅作为示例。
要求:
- 答案应该在vanilla-js中或普通的js。 (没有 jQuery 或任何其他库)
- 答案应该使用
new CustomEvent()
或new Event()
,而不是任何已弃用的方法。 - 当 mousedrag 被调用时,传递的事件参数应该与 mousemove 接收的事件参数相同。
代码:
我试过以下方法
var onMouseDrag = new CustomEvent('mousedrag'),
elem = document.getElementById('element'),
mousedown = false;
elem.addEventListener('mousedrag', function (event) {
// The event argument passed should be
// the same event as the event passed by any other mouse event.
// Do something while the mouse is being dragged.
});
elem.addEventListener('mousedown', function (event) {
mousedown = true;
});
elem.addEventListener('mouseup', function (event) {
mousedown = false;
});
elem.addEventListener('mousemove', function (event) {
if (mousedown) {
elem.dispatchEvent('mousedrag');
// Pass the event variable to the dispatched mousedrag.
}
});
最佳答案
你几乎明白了,但是你派发了你创建的原始事件,而不是字符串
var onMouseDrag = new CustomEvent('mousedrag'),
elem = document.getElementById('element'),
mousedown = false;
elem.addEventListener('mousedrag', function (event) {
console.log(event)
});
elem.addEventListener('mousedown', function (event) {
mousedown = true;
});
elem.addEventListener('mouseup', function (event) {
mousedown = false;
});
elem.addEventListener('mousemove', function (event) {
if (mousedown)
elem.dispatchEvent(onMouseDrag);
});
编辑:
看来你可以只向事件对象添加属性
var onMouseDrag = new CustomEvent('mousedrag'),
elem = document.getElementById('element'),
mousedown = false;
elem.addEventListener('mousedrag', function (event) {
var div = document.createElement('div');
div.className = 'point';
div.style.top = (event.clientY-71) + 'px';
div.style.left = (event.clientX-41) + 'px';
elem.appendChild(div);
});
elem.addEventListener('mousedown', function (event) {
mousedown = true;
});
elem.addEventListener('mouseup', function (event) {
mousedown = false;
});
elem.addEventListener('mousemove', function (event) {
if (mousedown) {
onMouseDrag.clientX = event.clientX;
onMouseDrag.clientY = event.clientY;
elem.dispatchEvent(onMouseDrag);
}
});
关于javascript - 如何在 vanilla Javascript 中创建、添加自定义属性和触发自定义事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21505235/