Saya perlu mengidentifikasi elemen dari mana peristiwa dipecat.
Menggunakan event.target
mendapatkan elemen masing-masing.
Properti apa yang dapat saya gunakan dari sana?
- href
- Indo
- nodeName
Saya tidak dapat menemukan banyak info tentangnya, bahkan di halaman jQuery , jadi di sini saya berharap seseorang dapat menyelesaikan daftar di atas.
EDIT:
Ini mungkin berguna: properti node selfHTML dan properti HTML selfHTML
sumber
Jika Anda memeriksa
event.target
dengan firebug atau alat pengembang chrome, Anda akan melihat elemen span (misalnya properti berikut) itu akan memiliki properti apa pun yang dimiliki elemen. Itu tergantung apa elemen targetnya:event.target: HTMLSpanElement attributes: NamedNodeMap baseURI: "file:///C:/Test.html" childElementCount: 0 childNodes: NodeList[1] children: HTMLCollection[0] classList: DOMTokenList className: "" clientHeight: 36 clientLeft: 1 clientTop: 1 clientWidth: 1443 contentEditable: "inherit" dataset: DOMStringMap dir: "" draggable: false firstChild: Text firstElementChild: null hidden: false id: "" innerHTML: "click" innerText: "click" isContentEditable: false lang: "" lastChild: Text lastElementChild: null localName: "span" namespaceURI: "http://www.w3.org/1999/xhtml" nextElementSibling: null nextSibling: null nodeName: "SPAN" nodeType: 1 nodeValue: null offsetHeight: 38 offsetLeft: 26 offsetParent: HTMLBodyElement offsetTop: 62 offsetWidth: 1445 onabort: null onbeforecopy: null onbeforecut: null onbeforepaste: null onblur: null onchange: null onclick: null oncontextmenu: null oncopy: null oncut: null ondblclick: null ondrag: null ondragend: null ondragenter: null ondragleave: null ondragover: null ondragstart: null ondrop: null onerror: null onfocus: null oninput: null oninvalid: null onkeydown: null onkeypress: null onkeyup: null onload: null onmousedown: null onmousemove: null onmouseout: null onmouseover: null onmouseup: null onmousewheel: null onpaste: null onreset: null onscroll: null onsearch: null onselect: null onselectstart: null onsubmit: null onwebkitfullscreenchange: null outerHTML: "<span>click</span>" outerText: "click" ownerDocument: HTMLDocument parentElement: HTMLElement parentNode: HTMLElement prefix: null previousElementSibling: null previousSibling: null scrollHeight: 36 scrollLeft: 0 scrollTop: 0 scrollWidth: 1443 spellcheck: true style: CSSStyleDeclaration tabIndex: -1 tagName: "SPAN" textContent: "click" title: "" webkitdropzone: "" __proto__: HTMLSpanElement
sumber
window.onclick = e => { console.dir(e.target); // use this in chrome console.log(e.target); // use this in firefox - click on tag name to view }
manfaatkan penggunaan properti filter
e.target.tagName e.target.className e.target.style.height // its not the value applied from the css style sheet, to get that values use `getComputedStyle()`
sumber
event.target
mengembalikan node yang ditargetkan oleh fungsi tersebut. Ini berarti Anda dapat melakukan apa pun yang ingin Anda lakukan dengan node lain seperti yang Anda dapatkandocument.getElementById
Saya mencoba dengan jQuery
var _target = e.target; console.log(_target.attr('href'));
Kembalikan kesalahan:
Tapi
_target.attributes.href.value
berhasil.sumber
e.target
bukan objek jQuery dan.attr()
metode jQuery. Jika Anda mencobanya,__target.getAttribute('href');
itu akan bekerja dengan baik.event.target
mengembalikan node yang ditargetkan oleh fungsi tersebut. Ini berarti Anda dapat melakukan apa pun yang akan Anda lakukan dengan node lain seperti yang Anda dapatkandocument.getElementById
sumber
Cara mudah untuk melihat semua properti pada simpul DOM tertentu di Chrome (saya menggunakan v.69) adalah dengan mengklik kanan pada elemen, pilih inspeksi, dan daripada melihat tab "Gaya", klik "Properti" .
Di dalam tab Properties Anda akan melihat semua properti untuk elemen tertentu Anda.
sumber
//Do it like--- function dragStart(this_,event) { var row=$(this_).attr('whatever'); event.dataTransfer.setData("Text", row); }
sumber