如何在使用jQuery中的CSS’background-image’属性添加的图像上绑定click事件

这是我的小提琴链接

我想我的问题很清楚标题本身。 不过，我正在寻找的是一种在使用css的background-image属性添加的图像上绑定click事件的方法。

我知道，我可以通过简单地将标签放在input框上然后处理所需的事件来实现类似的function（通过这种方式或这种方式 将图像放置在输入字段上 ），但这种方式似乎不太灵活输入不同宽度和高度的字段，或者如果包装div没有position:relative; 作为其财产。

如果无法在加载了background-image上添加事件，那么如何使后一种方法更加灵活。

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

谢谢。

Answer 1

这样的东西似乎也有效：

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

链接到示例

Answer 2

因此，您需要将click事件绑定到图像，但不要使用嵌入式attributte，顺便提一下这是一个非常好的和困难的问题。

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

你可以得到图像大小（widthImage和heightImage）并知道彼此的位置亲属（这里是一种计算objet相对于anohter的位置的方法： jQuery获取元素相对于另一个元素的位置 ）你可以使用它计算整个屏幕中输入的位置

并尝试这样的事情：

$（文件）。就绪（函数（）{

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

这只是一个想法...我试图弄清楚这一点，希望如此：哦

Answer 3

正如@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://sofzh.miximages.com/javascript/rough_Close.png'); background-repeat:no-repeat; background-position: center; background-size:90%; cursor: pointer; } 

HTML

 
  
 
  
 
  
 
 submit 

使用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://sofzh.miximages.com/javascript/rough_Close.png'); background-repeat:no-repeat; background-position:right center; background-size:10% 90%; z-index: -1; padding-right: 6%; } 

HTML

    
 submit 

使用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

但是如果你希望光标在hover在位置上时发生变化，那么你需要做一些额外的工作。 像这样（你也可以用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

Answer 4

我通过使用然后紧跟来做类似的事情

该按钮被赋予背景图像并相对于将其移动到文本字段中而定位; 实质上…

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

然后我只是在按钮上添加一个死明的单击处理程序，无需计算。

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

这个小提琴显示它削减了最基本的要素。