Javascript 如何在使用CSS添加的图像上绑定单击事件'；背景图像'；jQuery中的属性

这是我的小提琴

我想我的问题从题目本身就很清楚了。尽管如此，我仍在寻找一种方法来绑定使用css的

背景图像

属性添加的图像上的

单击

事件

我知道，我本可以实现类似的功能（使用or将图像放置在输入字段上）只需将

标记定位在

输入框上，然后处理所需的事件，但对于不同宽度和高度的输入字段，或者如果包装div没有
位置：relative，这种方式似乎不太灵活作为其属性

如果无法在加载了
背景图像的图像上添加事件，则如何使后一种方法更灵活

希望我已经清楚地表达了我的问题

谢谢。
因此，您需要将单击事件绑定到图像，但不要使用篡改属性。顺便说一句，这确实是一个非常好且困难的问题

我知道我的方法很复杂，但这是我目前唯一能想到的

您可以获得图像大小（widthImage和heightImage）并知道它们之间的相对位置（这里有一种计算对象相对于另一个对象的位置的方法：），您可以使用它来计算输入在整个屏幕中的位置

试着这样做：

$（文档）.ready（函数（）{

$（'body'）。在（'click'，'input.cross'，函数（e）上{
var widthInput=parseInt（$（this）.css（'width'），10）；
var heightInput=parseInt（$（this）.css（'height'），10）；
var position=$（this.position（）；
var top=position.top；
var left=position.left；
var sizesRelativesInPercentage=$（this.css（'background-size'）.split（+/）；
var WidthProcentage=parseInt（sizesRelativesInPercentage[0]，10）；
var heightPorcentage=parseInt（sizesRelativesInPercentage[1]，10）；
变量widthImage=（widthInput*widthPorcentage）/100；
var heightImage=（heightInput*heightprocentage）/100；
变量xFinalImageFinish=（左+宽输入）；
变量yFinalImageFinish=（顶部+高度输入）；
//如果单击在图像中，则触发回调
如果（e.pageX>=xFinalImageStart&&e.pageX=yFinalImageStart&&e.pageY类似的内容似乎也能工作：

$('.cross').click(function(e) {
  var mousePosInElement = e.pageX - $(this).position().left;
  if (mousePosInElement > $(this).width()) {
     $(this).val(''); 
  }
});

我做了类似的事情，使用
紧接着一个

按钮被赋予一个背景图像，并相对定位以将其移动到文本字段中；基本上

位置：相对；
顶部：4px；
右：1.6em；
高度：16px；
宽度：16px；
边界：无；

然后，我只需向按钮添加一个简单的点击处理程序，无需计算

高度x宽度取决于您的图像，您可以调整顶部和右侧以适应您的情况

这表明它已缩减到基本要素。
正如@Felix King所指出的那样

由于图像不是文档中的元素，因此不会触发
事件，您无法将处理程序绑定到它。您必须使用
变通办法

这里有一个可能的解决方法（在jquery中，但也可以是POJS）

CSS

HTML

在

或者，如果您不想使用额外的CSS和HTML，那么这应该是跨浏览器的（POJS，因为您已经有了一个jquery示例）

CSS

HTML

在

但是，如果您想在光标悬停在该位置上时更改光标，则需要做一些额外的工作

Javascript

$(document).on("click", "span.cross", function () {
    $(this).prev().val("");
}).on("focus", "input.textInput", function () {
    $(this).parent().addClass("wrapperFocus");
}).on("blur", "input.textInput", function () {
    $(this).parent().removeClass("wrapperFocus");
});

function normalise(e) {
    e = e || window.event;
    e.target = e.target || e.srcElement;

    return e;
}

var getWidth = (function () {
    var func;

    if (document.defaultView.getComputedStyle) {
        func = document.defaultView.getComputedStyle;
    } else if (target.currentStyle) {
        func = function (t) {
            return t.currentStyle;
        }
    } else {
        func = function () {
            throw new Error("unable to get a computed width");
        }
    }

    return function (target) {
        return parseInt(func(target).width);
    };
}());

function isInputCross(target) {
    return target.tagName.toUpperCase() === "INPUT" && target.className.match(/(?:^|\s)cross(?!\S)/);
}

function isOverImage(e) {
    return (e.clientX - e.target.offsetLeft) > getWidth(e.target);
}

function clearCrossInput(e) {
    e = normalise(e);
    if (isInputCross(e.target) && isOverImage(e)) {
        e.target.value = "";
    }
}

document.body.onclick = (function () {
    var prevFunc = document.body.onclick;

    if ({}.toString.call(prevFunc) === "[object Function]") {
        return function (ev) {
            prevFunc(ev);
            clearCrossInput(ev);
        };
    }

    return clearCrossInput;
}());

function hoverCrossInput(e) {
    e = normalise(e);
    if (isInputCross(e.target)) {
        if (isOverImage(e)) {
            e.target.style.cursor = "pointer";
            return;
        }
    }

    e.target.style.cursor = "";
}

document.body.onmousemove = (function () {
    var prevFunc = document.body.onmousemove;

    if ({}.toString.call(prevFunc) === "[object Function]") {
        return function (ev) {
            prevFunc(ev);
            hoverCrossInput(ev);
        };
    }

    return hoverCrossInput;
}());

关于
一个令人难以置信的好问题和难问题。老实说，我认为唯一的解决办法是以你不希望的方式，将图像放在输入框上（或挂在右边缘）然后动态处理输入本身的位置和大小。这种方式的链接不起作用。我不明白你想说什么achive@sandinolink edited now check由于图像不是文档中的元素，因此它不会触发事件，并且您无法将处理程序绑定到它。您必须使用变通方法。哇！！真的works+1-将很快接受：）在得到更多的替代方案之后……这就是我所说的……你们这些摇滚人！！真的，我会发布我的可怕解决方案，只是为了注意到你们的优雅方式man@Brian胡佛又问了一个问题，为什么它会改变按键上的文本框宽度？我做了一点改变-CSS有点错误。“none”类需要一个“.”我认为应该澄清的是，这实际上并不是“在使用CSS添加的图像上绑定点击事件”而是检测鼠标和图片的位置。答案很好。如果这就是谷歌解决这个问题的方式，我建议@BrianHoover为他们工作……他使用了一个非常简单的解决方案，不需要css，也不需要额外的html标记。我并不是说这不是一个好的解决方案，而是将它改为基于javascript的。@Xotic750+1太好了，你做到了无论如何：）尚未实现您的脚本，但它看起来很有希望+1
$(document).on("click", "span.cross", function () {
    $(this).prev().val("");
}).on("focus", "input.textInput", function () {
    $(this).parent().addClass("wrapperFocus");
}).on("blur", "input.textInput", function () {
    $(this).parent().removeClass("wrapperFocus");
});

.cross {
    height: 20px;
    width: 150px;
    background-image:url('http://s20.postimg.org/6125okgwt/rough_Close.png');
    background-repeat:no-repeat;
    background-position:right center;
    background-size:10% 90%;
    z-index: -1;
    padding-right: 6%;
}

<input type="text" class="cross" />
<input type="text" class="cross" />
<input type="text" class="cross" />
<hr>
<button>submit</button>

function normalise(e) {
    e = e || window.event;
    e.target = e.target || e.srcElement;

    return e;
}

var getWidth = (function () {
    var func;

    if (document.defaultView.getComputedStyle) {
        func = document.defaultView.getComputedStyle;
    } else if (target.currentStyle) {
        func = function (t) {
            return t.currentStyle;
        }
    } else {
        func = function () {
            throw new Error("unable to get a computed width");
        }
    }

    return function (target) {
        return parseInt(func(target).width);
    };
}());

function isInputCross(target) {
    return target.tagName.toUpperCase() === "INPUT" && target.className.match(/(?:^|\s)cross(?!\S)/);
}

function isOverImage(e) {
    return (e.clientX - e.target.offsetLeft) > getWidth(e.target);
}

function clearCrossInput(e) {
    e = normalise(e);
    if (isInputCross(e.target) && isOverImage(e)) {
        e.target.value = "";
    }
}

document.body.onclick = (function () {
    var prevFunc = document.body.onclick;

    if ({}.toString.call(prevFunc) === "[object Function]") {
        return function (ev) {
            prevFunc(ev);
            clearCrossInput(ev);
        };
    }

    return clearCrossInput;
}());

function hoverCrossInput(e) {
    e = normalise(e);
    if (isInputCross(e.target)) {
        if (isOverImage(e)) {
            e.target.style.cursor = "pointer";
            return;
        }
    }

    e.target.style.cursor = "";
}

document.body.onmousemove = (function () {
    var prevFunc = document.body.onmousemove;

    if ({}.toString.call(prevFunc) === "[object Function]") {
        return function (ev) {
            prevFunc(ev);
            hoverCrossInput(ev);
        };
    }

    return hoverCrossInput;
}());