將具有事件偵聽器的元素傳遞給模板事件中的appendChild

此流星客戶端代碼未能觸發在公共方法中創建的畫布上的mousemove事件。 onmousemove也失敗了。
這可以做到，如果是這樣，如何？將具有事件偵聽器的元素傳遞給模板事件中的appendChild

Template.report.events({ 
    'click #myElemnt': functionj(event) { 
     event.target.appendChild(lib.myCanvas()); 
    } 
}) 

//lib.js 
lib = (function() { 

    return { 
     myCanvas:() => { 

      let canv = document.createElement('canvas'); 
      //style it here 
      canv.addEventListener('onmousemove', function() { 
       console.log('moving'); 
      } 
      return canv; 
     } 

    })();

編輯
這裏是代碼的一部分改變語法

lib = (function() { 

     return { 

     myCanvas:() => { 
      let sigCanvas = document.createElement('canvas'); 
      sigCanvas.style.position = 'absolute'; 
      sigCanvas.style.width = 25 + 'em'; 
      sigCanvas.style.height = 15 + 'em'; 
      sigCanvas.style.top = -90 + 'px'; 
      sigCanvas.style.left = -50 + 'px'; 
      sigCanvas.id = 'signature'; 
      sigCanvas.style.border = '1px solid black'; 

      sigCanvas.addEventListener('onmousemove', function() { 
      console.log('mouse moving again'); 
      }, false); 
      return sigCanvas; 
     } 
     }());

EDIT2
這裏後，從瀏覽器元素標籤畫布

來源

2016-08-12 Fred J.

有代碼似乎語法錯誤，附加事件監聽器這樣的。（''移動'）; }，false）;}};}}}。嘗試一次。 –

@VishalGupta沒有開啓'onmousemove'仍然 –

我已經做了很多像jQuery那樣的東西，我應該提到這些。 –

根據EventTarget API，您應該爲addEventListener方法提供沒有on前綴的事件類型。

這應該做的工作：

sigCanvas.addEventListener('mousemove', function(e) { 
    console.log('mouse moving again'); 
});

來源

2016-08-12 07:47:16 MasterAM

請注意，在我的帖子中，我已經試過這個，但是我試了一遍，因爲你的答案無濟於事。 –

儘管如此，這是正確的形式。 'onmousemove'不起作用。嘗試隔離你的問題。在控制檯中創建一個「畫布」並將其附加到主體。嘗試按照你在圖書館中的樣式來設計它，並查看它是否會改變它的行爲。然後檢查由您的代碼創建的畫布，並查看它擁有哪些偵聽器，然後使用控制檯操作它。你的代碼根本不足以進行復制。 – MasterAM

如果將事件附加到流星模板中，該事件將起作用，我可能是Blaze對中間人事件不滿意。 –

將具有事件偵聽器的元素傳遞給模板事件中的appendChild

回答

相關問題