Question

我有一个对象confBtns包含两个基于以下html的按钮：

<footer>
  <button id="authCreateAcctConfirmNoBtn" class="button2">
    No
  </button>
  <button id="authCreateAcctConfirmYesBtn" type="submit" class="red-button">
    Yes
  </button>
</footer>

我想要的是当有人点击其中任何一个按钮时，然后“是”或“否”通过这样的功能：

dataLayer.push({
    "event":"ButtonBlur",
    "elementText": /*What goes here to grab Yes or No depending which blurred? */
});

我可以写两个单独的脚本并为每个按钮添加一个事件监听器，如下所示：

document.querySelectorAll("#authCreateAcctConfirmYesBtn")[0].addEventListener("blur", 
    dataLayer.push({
        "event":"ButtonBlur",
        "elementText": "No"
    )}
); 
);

然后是Yes按钮。

但是如何在一个人身上做到这一点？

我尝试根据我的需要调整this SO帖子，但我正在转动我的车轮。这是我在控制台中尝试的内容：

var confBtns = document.querySelectorAll("#authCreateAcctConfirmYesBtn,authCreateAcctConfirmNoBtn");

btnPush = function() {
    dataLayer.push({
        "event":"ButtonBlur",
        "elementText": /*What will go here to be Yes or No?*/
    })
};

function addEventListenerConfBtns (btns, event, fn) {
    for (var i = 0, len = btns.length; i < len; i++) {
        btns[i].addEventListener(event, fn, false);
    }
}

addEventListenerConfBtns(confBtns, "blur", btnPush);

所以我真的有两个问题：

如何让我的功能发挥作用？
如何为“elementText”的值动态传递“是”或“否”？

当我在控制台中运行时，我得到“未定义”。我希望能够单击然后模糊按钮，然后在控制台中查看dataLayer的值。但是没有来自函数btnPush的dataLayer值。

Answer 1

你搞乱了事件。您真正需要的事件是click，而不是blur，因为例如，当用户使用标签导航时，可能会触发该事件。

addEventListenerConfBtns(confBtns, "click", btnPush);

在btnPush中，您收到事件作为第一个参数，事件的target属性是被点击的元素，因此：

btnPush = function(e) {
    dataLayer.push({
        "event":"ButtonBlur",
        "elementText": e.target.innerText
    })
};

我没有尝试，但它应该工作。

努力将事件监听器添加到数组或节点列表

1 个答案: