javascript - css背景图片上的onclick事件？

Question

我在 html 中创建了一个 div，它创建了一个文本框并为其分配了一个背景图像，我想为该输入字段的背景图像创建一个 onclick 事件。

document.getElementsByClassName("textboxcss").onclick = function() {
    alert("Hello"); 
};

.textboxcss {
    background-image: url("../images/sub.png");
    background-repeat: no-repeat;
    background-position: right;
    background-position: 8px 13px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
    <input class="textboxcss" id="default" type="text">
</div>

我看到正确获取图像...但我无法通过这种方式获得 onclick。还有其他办法吗？

Answer 1

更新了答案

尝试使用 querySelector()，

(function(){
    document.querySelector(".textboxcss").onclick = function () {
       alert("Hello!"); 
    };
}());

示例:https://jsfiddle.net/sj7n7eko/3/

---

如果您想使用 getElementsByClassName()，您必须遍历选择器元素并绑定(bind) onClick 事件。因为 getElementsByClassName() 返回一个 Array。

(function(){

    var textInputs = document.getElementsByClassName("textboxcss");

    Array.prototype.forEach.call(textInputs, function () {
        this.onclick = function () { 
            alert("Hello!");
        };
    });

}());

示例:https://jsfiddle.net/sj7n7eko/5/

---

还注意到您在更新的问题中使用了 jquery，

然后你就可以简单地使用jQuery了

$(".textboxcss").click(function(){
   alert("Hello!");
});

或者如果您动态添加元素，

$("body").on("click", ".textboxcss", function(){
   alert("Hello!");
});