Отримати ідентифікатор елемента, який називається функцією

Як я можу отримати ідентифікатор елемента, який називається функцією JS?

body.jpg - це зображення собаки, коли користувач спрямовує мишу навколо екрану на різні частини тіла. Збільшене зображення відображається. Ідентифікатор елемента області ідентичний імені файлу зображення за мінусом папки та розширення.

<div>
    <img src="images/body.jpg" usemap="#anatomy"/>
</div>

<map name="anatomy">
  <area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom()"/>
</map>

<script type="text/javascript">
function zoom()
{
 document.getElementById("preview").src="images/nose.jpg";
}
</script>

<div>
<img id="preview"/>
</div>

Я провів дослідження і в останньому випадку прийшов до Stack Overflow. Я віддаю перевагу рішенню, яке не включає jQuery.

Передайте посилання на елемент у функцію, коли вона викликається:

<area id="nose" onmouseover="zoom(this);" />

<script>
  function zoom(ele) {
    var id = ele.id;

    console.log('area element id = ' + id);
  }
</script>

Я здивований, що ніхто не згадував про використання thisв обробнику подій. Він працює автоматично в сучасних браузерах і може бути змушений працювати в інших браузерах. Якщо ви використовуєте addEventListenerабо attachEventдля встановлення вашого обробника події, ви можете зробити так, щоб значення thisавтоматично присвоювалось об'єкту, який створив подію.

Крім того, користувач програмно встановлених обробників подій дозволяє відокремити код javascript від HTML, що часто вважається хорошою справою.

Ось як ви можете це зробити у своєму коді в простому javascript:

Видаліть onmouseover="zoom()"файл з HTML-коду та встановіть обробник подій у свій javascript таким чином:

// simplified utility function to register an event handler cross-browser
function setEventHandler(obj, name, fn) {
    if (typeof obj == "string") {
        obj = document.getElementById(obj);
    }
    if (obj.addEventListener) {
        return(obj.addEventListener(name, fn));
    } else if (obj.attachEvent) {
        return(obj.attachEvent("on" + name, function() {return(fn.call(obj));}));
    }
}

function zoom() {
    // you can use "this" here to refer to the object that caused the event
    // this here will refer to the calling object (which in this case is the <map>)
    console.log(this.id);
    document.getElementById("preview").src="http://photos.smugmug.com/photos/344290962_h6JjS-Ti.jpg";
}

// register your event handler
setEventHandler("nose", "mouseover", zoom);

Ви можете використовувати 'this' у обробнику подій:

document.getElementById("preview").onmouseover = function() {
    alert(this.id);
}

Або передайте об’єкт події обробнику наступним чином:

document.getElementById("preview").onmouseover = function(evt) {
    alert(evt.target.id);
}

Для вкладання подій рекомендується використовувати attachEvent (для IE <9) / addEventListener (IE9 та інші браузери). Приклад вище наведено для стислості.

function myHandler(evt) {
    alert(evt.target.id);
}

var el = document.getElementById("preview");
if (el.addEventListener){
    el.addEventListener('click', myHandler, false); 
} else if (el.attachEvent){
    el.attachEvent('onclick', myHandler);
}

Ви можете кодувати налаштування обробника так:

<area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom.call(this)"/>

Тоді thisу вашому обробнику буде посилатися на елемент. Зараз я запропоную застереження: я не впевнений на 100%, що відбувається, коли у вас є обробник у <area>тегу, здебільшого тому, що я не бачив <area>тегу приблизно десять років. Я думаю, це повинно дати вам тег зображення, але це може бути неправильно.

редагувати - так, це неправильно - ви отримуєте <area>тег, а не <img>. Отже, вам доведеться отримати батьківський елемент цього елемента (карту), а потім знайти зображення, яке його використовує (тобто <img>атрибут чий "usemap" посилається на ім'я карти).

відредагуйте ще раз - за винятком того, що це не має значення, тому що ви хочете, щоб "ідентифікатор" області був довшим. Вибачте за неправильне читання.

Я знаю, що вам не потрібне рішення jQuery, але включення javascript всередину HTML - це велике ні.

Я маю на увазі, що ви можете це зробити, але є безліч причин, чому цього не слід робити (прочитайте ненав’язливий javascript, якщо хочете отримати деталі).

Отже, в інтересах інших людей, які можуть побачити це питання, ось рішення jQuery:

$(document).ready(function() {
  $('area').mouseover(function(event) {
    $('#preview').attr('src', 'images/' + $(event.srcElement).attr('id'));
  });
});

Основна перевага полягає в тому, що ви не змішуєте код JavaScript з HTML. Більше того, вам потрібно написати це лише один раз, і це буде працювати для всіх тегів, на відміну від необхідності вказувати обробник для кожного окремо.

Додатковою перевагою є те, що кожен обробник jQuery отримує об’єкт події, який містить багато корисних даних - наприклад, джерело події, тип події тощо, що значно полегшує написання типу коду, за яким ви переслідуєте.

Нарешті, оскільки це jQuery, вам не потрібно думати про речі в різних браузерах - головна перевага, особливо при роботі з подіями.

Я також хочу, щоб це сталося, тому просто передайте ідентифікатор елемента у викликаній функції та використовується у моєму js-файлі:

function copy(i,n)
{
 var range = document.createRange();
range.selectNode(document.getElementById(i));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range); 
document.execCommand('copy');
window.getSelection().removeAllRanges();
document.getElementById(n).value = "Copied";
}

Для інших, які несподівано отримують елемент Window, загальна помилка:

<a href="javascript:myfunction(this)">click here</a>

який фактично спрямовується thisдо об'єкта Window. Натомість:

<a href="javascript:nop()" onclick="myfunction(this)">click here</a>

передає aоб'єкт, як очікувалося. (nop () - це будь-яка порожня функція.)