15

这是我的小提琴链接

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

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

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

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

谢谢。

4

4 回答 4

10

Something like this appears to also work:

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

Link to example

于 2013-07-11T00:28:49.160 回答
2

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

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

您可以获取图像大小（widthImage 和 heightImage）并知道一个相对于另一个的位置（这是一种计算对象相对于另一个元素的位置的方法：jQuery get position of element relative to another element）您可以使用它计算输入在整个屏幕中的位置

并尝试这样的事情：

$(文档).ready(函数(){

  $('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

于 2013-07-11T00:25:56.383 回答
2

正如@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 上

于 2013-07-11T01:14:02.500 回答
1

我通过使用一个<input type="text" ... >紧跟一个<input type="button">

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

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

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

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

这把小提琴表明它精简到了最基本的要素。

于 2013-07-11T00:59:41.350 回答