javascript - 拉斐尔，使对象不接收事件

Question

我正在处理的对象后面有一个对象，我不想单击第一个元素，我想单击它下面的那个。

是否可以让 raphael 中的元素停止接收事件，但仍然可见？

Answer 1

事件冒泡，所以它后面的对象仍然会收到点击事件。只需忽略前面对象上的事件。但是，如果“在前面”的对象不是“在后面”的对象的子对象，那将不起作用。当您像 Rapahel 那样拥有绝对定位的元素时，就是这种情况。您唯一的解决方案是使用 http://robertnyman.com/css3/pointer-events/pointer-events.html

pointer-events: none;

但这仅适用于最新的 FF 和 Chrome

或者使用像 Randy Hall 建议的黑客，通过隐藏被点击的元素并使用elementFromPoint()

Answer 2

我有一个解决方案，只是构建了类似的东西。您需要做的是在可见对象后面的对象上触发一个事件。本质上，您需要在画布后面的 dom 上触发事件吗？您需要制定跨浏览器的具体细节，但这应该可以帮助您入门

element.onclick = function (e){ //or however you're binding it
    // create some function so that canvas.style = display none, so that it's not in the way
    // then get the element at the click coordinates
    var ghost = document.elementFromPoint(e.pageX, e.pageY);
    //create an event
    var evt = document.createEvent('Event');
    evt.initEvent(e.type, true, true);
    //set x and y on evt to match the x and y that was used in the original click
    evt.pageX = e.pageX;
    evt.pageY = e.pageY;
    //do the event on the element
    ghost.dispatchEvent(evt);
    // create some function to reshow the canvas. 
}

或者，如果您尝试在画布上单击特定元素后面的内容，则可以隐藏该元素。或者，如果您在事件发生后不需要它，您可以完全销毁画布而不是隐藏它。