2012-08-31 4 views
3

투명한 배경을 가진 캔버스를 다른 캔버스 위에 놓고 마우스 이벤트를 둘 다 요소로 등록하려고합니다. 그러나 위쪽 캔버스는 마우스 이벤트가 하위 이벤트에 도달하는 것을 방지합니다. 가장 좋은 방법은 무엇입니까?누적 캔버스 이벤트

 <div class="outer"> 
     <div class="inner" id="canvas_container_1"></div> 
     <div class="inner" id="canvas_container_2"></div> 
    </div> 

답변

0

.

var handler = function(e) { 
    // the actual handler 
    console.log(e.pageX, this); 
}; 

$(".inner").on("mousedown", function(e) { 
    var args = arguments; 
    var value; 
    $(".inner").each(function() { 
     // call handler for each element; preserve `return false` functionality 
     if(handler.apply(this, args) === false) { 
      value = false; 
      return false; 
     } 
    }); 
    return value; 
}); 
+0

그러나 특정 핸들러 함수를 호출하는 것뿐만 아니라 두 캔버스 모두에서 마우스 이벤트가 올바르게 트리거되기를 원합니다. .each 함수 내에서 this.trigger (e)를 사용하여 시도했지만 작동하지 않았습니다. 이것을 달성하는 가장 좋은 방법은 무엇입니까? – Mixel

+0

@Mixel :이게 뭔가? http://jsfiddle.net/AzNQb/1/ – pimvdb

0

두 가지 모두 내부 캔버스입니까?

예 = 다음 당신의 "내부"클래스에 이벤트 리스너를 추가하는 경우 : http://jsfiddle.net/AzNQb/ :이 같은 모든 요소에 트리거를 시뮬레이션한다 수행 할 수있는

$('.outer').on('click','.inner',function() { ... })