事件监听器没有点击发射

我正在创建一个简单的函数来关闭点击事件上的Flash消息div，但我的监听器没有发射。事件监听器没有点击发射

我写了3个不同的函数来试图让它工作，但没有任何事情发生，Chrome控制台没有告诉我任何东西。

我的第一次是在ES6类风格，这一个：

class closeFlashMessages { 
    constructor() { 
    this.getFlashMessages = document.querySelector("#flash-messages"); 

    this.addEventListeners(); 
    } 

    close() { 
    console.log(this.getFlashMessages); 
    this.getFlashMessages.className = "hide"; 
    } 

    addEventListeners() { 
    if(this.getFlashMessages) 
    this.getFlashMessages.addEventListener("click", this.close); 
    } 
} 
new closeFlashMessages();

我的第二个是这样的：

(function(){ 
    let getFlashMessages = document.querySelector("#flash-messages"); 

    function close() { 
    console.log(getFlashMessages); 
    getFlashMessages.className = "hide"; 
    } 

    function addEventListeners() { 
    getFlashMessages.addEventListener("click", function() { 
     close() 
    }); 
    } 

    addEventListeners(); 
});

我最后的一个是这样的：

(function(){ 
    let getFlashMessages = document.getElementById("flash-messages"); 
    getFlashMessages.addEventListener("click", close(getFlashMessages)); 

    function close (id) { 
    console.log(getFlashMessages); 
    getFlashMessages.className = "hide"; 
    } 
});

我的HTML：

<div id="flash-messages"> 
     <div class="flash success"> 
      <p>Recept byl přidán do nákupního seznamu.</p> 
     </div> 
</div>

但他们都没有工作！我不明白

随着前两个，我得到undefined我的this.getFlashMessages也不知道为什么。

来源

2017-02-20 Jousi

我对ES6不太了解。

但是，如果我在JavaScript上尝试类似的代码示例，它将如下给出，我希望它将在ES6中几乎类似。

var getFlashMessages = document.getElementById("flash-messages"); 
getFlashMessages.addEventListener("click", function() 
{ 
    clicked(getFlashMessages); 
}); 

function clicked(id){ 
    console.log(id); 
    id.className = "hide"; 
}

在这里，我调用匿名函数，它的默认参数将是活动对象为https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener给出。

来源

2017-02-20 16:24:58

我的解决方案是不是在ES6

function Init(){ 
    var id = document.getElementById('flash-messages'); 
    var msg = document.querySelector('.flash'); 
    id.addEventListener('click',function(){ 
     msg.className = 'hide'; 
    }); 
} 
Init();

看到demo这里

来源

2017-02-21 05:41:19

事件监听器没有点击发射

回答

相关问题