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!");
});

Answer 2

應該是工作...

function Alerta(table) 
{
   alert("Hello"); 
}

<div><input class="textboxcss" id="default" type="text" onclick="Alerta()">
</div>

注意：您可以更改啟動 JS 功能的事件。 Onblur、Onfocus、...查看此列表列表事件

Answer 3

getElementsByClassName()返回一個數組。 所以你至少應該選擇數組中的第一個元素。

 var elements = document.getElementsByClassName("textboxcss")

 // Assign click event
 elements[0].onclick= function () { 
    alert("Hello"); 
 };

Answer 4

我可以感覺到這里的一些設計問題，但是針對您的問題，您可以通過onfocus或onclick輸入元素來實現它。

(function() {
    // your page initialization code here
    // the DOM will be available here
    document.querySelector(".textboxcss").onfocus = function() {
        alert("Hello");
    };
})();

或者，

(function() {
    document.getElementsByClassName("textboxcss")[0].onfocus = function() {
        alert("Hello");
    };
})();

或根據需要綁定 onclick 事件，

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

演示 JSFiddle

Answer 5

使用您要在單擊時分配的背景圖像創建另一個類。 然后單擊添加另一個類（用!important用 css 編寫背景圖像）

Answer 6

您需要將 .css 類分別分配給背景。 共享完整代碼以更好地理解。

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

HTML：

<div>
    <span class="imageControl"></span>
    <input id="default" type="text">
</div>

點擊事件：

document.getElementByClassName("imageControl").addEventListener("click", function() {
// To-Do on click of background image
});