html ловушка для холста левой кнопкой мыши и разрешить щелчок правой кнопкой мыши (указатель-события)

Question

Вариант использования заключается в том, что у меня есть html-холст поверх нескольких элементов html, которые прослушивают события мыши правой кнопкой мыши. Я хочу рисовать на холсте с помощью левой кнопки мыши и в то же время взаимодействовать с основными элементами html, используя правый щелчок.

Получаю, что я могу разрешить всем событиям мыши проходить через холст, установив css-свойство pointer-events на none. Однако я хочу разрешить только правый щелчок, чтобы пройти через него.

Одним из способов достижения этого может быть прослушивание на холсте для правого клика, установка указателей-событий в обратном вызове, а затем вручную запустить событие щелчка правой кнопкой мыши и вернуть указатель-события в авто.

Btw Я использую KineticsJS, и я не знаю, как вручную запускать события мыши, используя его.

Любые предложения будут оценены.

Answer 1

Интересный объект, который привлек мое внимание. Было весело придумать решение, основанное на this jQuery approach и некоторых других. Я не знаком с KineticsJS, но это простой Javascript подход

В сущности вы можете подделать pointer-events:none только правый клик, используя объект размеров/позиционирование и onmousedown «s event.which, чтобы определить, является ли правая кнопка мыши была нажмите на элементы фона. Ниже приведен пример такого подхода, мы надеемся, комментарии объясняют это хорошо

// Get all overlaying canvases 
var canvas = document.getElementsByTagName("canvas"), 
// Get all elements that you want the click to fire on 
    background = document.getElementsByClassName("background"); 

// Use click location and dimensions/positioning to fake a click through 
function passThrough(e) { 
    // Allow only right click to pass through 
    if(e.which == 2 || e.which == 3) { 
     // Check all background elements 
     for(var i = 0; i < background.length; i++) { 
      // check if clicked point (taken from event) is inside element 
      var mouseX = e.pageX; 
      var mouseY = e.pageY; 
      var obj = background[i]; 
      var width = obj.clientWidth; 
      var height = obj.clientHeight; 

      if (mouseX > obj.offsetLeft && mouseX < obj.offsetLeft + width 
       && mouseY > obj.offsetTop && mouseY < obj.offsetTop + height) { 
       // Force click event if within dimensions 
       background[i].onclick(); 
      } 
     } 
    } 
} 

for(var i = 0; i < canvas.length; i++) { 
    // Force our function when clicked 
    canvas[i].onmousedown = passThrough; 
    // Prevent menu from appearing 
    canvas[i].oncontextmenu = function(event) { event.returnDefault; return false; } 
} 
for(var i = 0; i < background.length; i++) { 
    // Toggle background when clicked (to show it works) 
    background[i].onclick = function() { 
     if(this.style.background == "black") { 
      this.style.background = "red"; 
     } 
     else { 
      this.style.background = "black"; 
     } 
    } 
} 

Я надеюсь, что он соответствует вашим потребностям!