如何在jQuery中使用CSS'background-image'属性在图像上添加点击事件

问题描述

这是我的小提琴

我猜我的问题是清楚的标题本身。仍然，我正在寻找的是一种方法绑定 background-image 属性添加的图像点击 。

I guess my question is clear by title itself. Still, what I am looking for is an way to bind click event on the image added using css's background-image property.

我知道，使用或） < img> 标记在输入框，然后处理所需的事件，但是这种方式似乎不太灵活不同宽度和高度的输入字段，或者如果包装div没有 position：relative; 作为其属性。

I know, I could have achieved the similar functionality (of placing image over input field using this way or this way) by simply positioning <img> tag over input box and then handling the required events but that way didn't seem too flexible with input fields of varying width and height or if the wrapping div doesn't have position:relative; as its property.

如果在加载了 background-image 的图像上添加事件是不可能的，那么如何使后面的方法更加灵活。

If adding event on image loaded with background-image is not possible then how to make the later approach more flexible.

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

Hope I have conveyed my issues clearly.

谢谢。

推荐答案

这样的东西似乎也有效：

Something like this appears to also work:

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

这篇关于如何在jQuery中使用CSS'background-image'属性在图像上添加点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！