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>

我看到图像正确...但我无法以这种方式单击。还有其他办法吗？

Answer 1

更新了答案

尝试querySelector()相反，

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

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

如果您想使用getElementsByClassName()，则必须遍历选择器元素并绑定 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!");
});