Jak powiązać zdarzenie click na obraz dodane za pomocą CSS „background-image” obiektu jQuery

Question

Oto moje skrzypce link

Chyba moje pytanie jest jasne od samego tytułu. Jednak to, czego szukam, jest sposobem związania zdarzenia click na obrazie dodanym za pomocą właściwości css o wartości background-image.

Wiem, mógłbym osiągnąć podobną funkcjonalność (umieszczenia obrazu na polu wprowadzania użyciu this way lub this way) po prostu przez umieszczenie <img> tag nad input pole, a następnie przenoszenia wymaganych zdarzeń, ale w ten sposób nie wydaje się zbyt elastyczny z polami wejściowymi o różnej szerokości i wysokości lub jeśli jednostka opakowująca nie ma position:relative; jako swojej właściwości.

Jeśli dodawanie zdarzenia na obrazie załadowanym przy użyciu background-image nie jest możliwe, to sposób, aby późniejsze podejście było bardziej elastyczne.

Mam nadzieję, że jasno przekazałem moje problemy.

Dzięki.

Answer 1

Coś jak to wydaje się również działać:

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

Link to example

Answer 2

Musisz powiązać zdarzenie click z obrazem, ale nie używając przydziałów, które tak naprawdę są bardzo dobrym i trudnym pytaniem.

Wiem, że moje podejście jest skomplikowane, ale to jedyne, co mogę teraz zauważyć.

Możesz uzyskać rozmiar obrazu (widthImage i heightImage) oraz znać krewnych pozycji jednego z drugiego (tutaj jest sposób obliczania położenia obiektu względem anohtera: jQuery get position of element relative to another element) możesz go użyć do obliczenia pozycji wejścia w całym ekranie

i spróbować czegoś takiego:

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

to tylko pomysł ... próbuję aby zrobić skrzypce na ten temat, miejcie nadzieję: O

Answer 3

zrobić coś podobnego przy użyciu <input type="text" ... > natychmiast następuje przez <input type="button">

Przycisk otrzymuje obraz tła i umieszczone -relatywny, aby przenieść go do pola tekstowego; zasadniczo ...

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

Następnie dodaję przycisk obsługi typu "dead-plain click" do przycisku, bez konieczności wykonywania obliczeń.

Wysokość x szerokość zależałaby od twojego wizerunku, a Ty dostosowałbyś górną i prawą, by dopasować się do sytuacji.

Ten fiddle pokazuje go w skrócie do najpotrzebniejszych rzeczy.

Answer 4

Jak podkreślił @Felix Króla

Ponieważ obraz nie jest to element w dokumencie, nie wywoła zdarzeń i nie można powiązać obsługi do niego. Musisz użyć obejścia zastępczego .

Oto możliwe obejście (w jquery, ale może równie dobrze być 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"); 
}); 

Na jsfiddle

Albo, jeśli chcesz to zrobić bez dodatkowego CSS i HTML, to powinno być w wielu przeglądarkach (POJS, ponieważ już masz przykład 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; 
}()); 

Na jsfiddle

Ale jeśli chcesz zmienić kursor gdy unosił się nad wtedy będziesz musiał wykonać dodatkową pracę. W ten sposób (równie dobrze można to zrobić z 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; 
}()); 

Na jsfiddle