如何在使用CSS'添加的图像上绑定点击事件;背景图像'属性

类似的东西似乎也起作用：

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

链接到示例

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

我知道我的方法很复杂，但这是我现在唯一能想到的。

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

尝试一下这样的东西：

$（document）.ready（function）｛

  $('body').on('click', 'input.cross', function (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 widthPorcentage = parseInt(sizesRelativesInPercentage[0],10);
        var heightPorcentage =  parseInt(sizesRelativesInPercentage[1],10);
        var widthImage = (widthInput * widthPorcentage)/100;
        var heightImage = (heightInput * heightPorcentage)/100;
        var xFinalImageFinish= (left+widthInput);
        var yFinalImageFinish = (top+heightInput);

        // Fire the callback if the click was in the image
        if (e.pageX >= xFinalImageStart && e.pageX <= xFinalImageFinish &&
            e.pageY >= yFinalImageStart && e.pageY <= yFinalImageFinish) {
            // Prevent crazy animations and redundant handling
            $(this).off('click');
            alert('click on the image');
            //Do whatever you want
        }
    });
});

这只是一个想法。。。我正试图对此进行篡改，希望如此：O

正如@Felix King 所指出的

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

这里有一个可能的解决方案（在jquery中，但也可以很容易地使用POJS）。

CSS

.wrapper {
    padding: 1px;
    display: inline-block;
    border: 2px LightGray inset;
}
.wrapperFocus {
    border: 2px DarkGray inset;
}
.textInput {
    padding: 0;
    border:none;
    outline: none;
    height: 20px;
    width: 150px;
}
.cross {
    float: right;
    height: 20px;
    width: 20px;
    background-image:url('http://s20.postimg.org/6125okgwt/rough_Close.png');
    background-repeat:no-repeat;
    background-position: center;
    background-size:90%;
    cursor: pointer;
}

HTML

<fieldset class="wrapper">
    <input type="text" class="textInput" /><span class="cross"></span>
</fieldset>
<fieldset class="wrapper">
    <input type="text" class="textInput" /><span class="cross"></span>
</fieldset>
<fieldset class="wrapper">
    <input type="text" class="textInput" /><span class="cross"></span>
</fieldset>
<hr>
<button>submit</button>

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

关于jsfiddle

或者，如果你想在没有额外CSS和HTML的情况下完成它，那么这应该是跨浏览器的（POJS，因为你已经有了一个jquery示例）。

CSS

.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%;
}

HTML

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

Javascript

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;
}());

关于jsfiddle

但是，如果你想让光标悬停在这个位置上时发生变化，那么你需要做一些额外的工作。像这样（使用jquery也可以很容易地做到这一点）。

Javascript

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;
}());

在jsfiddle 上

我使用<input type="text" ... >紧接着<input type="button"> 来做类似的事情

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

position: relative;
top: 4px;
right: 1.6em;
height: 16px;
width: 16px;
border: none;

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

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

这把小提琴展示了它被精简到最基本的部分。