JavaScript:IDやクラスを指定せず、画面内のクリックした要素の情報を参照する

goto_jp 690views 更新:2014年7月11日
window.onload=function(){
    document.onmousedown=function(e){
        console.log(e);
    }
}

下記のような情報を参照できます。

MouseEvent {dataTransfer: null, toElement: div.inner, fromElement: null, y: 85, x: 464…}
altKey: false
bubbles: true
button: 0
cancelBubble: false
cancelable: true
charCode: 0
clientX: 464
clientY: 85
clipboardData: undefined
ctrlKey: false
currentTarget: null
dataTransfer: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
keyCode: 0
layerX: 140
layerY: 24
metaKey: false
offsetX: 140
offsetY: 24
pageX: 464
pageY: 85
path: NodeList[0]
relatedTarget: null
returnValue: true
screenX: 1744
screenY: 170
shiftKey: false
srcElement: div.inner
target: div.inner
timeStamp: 1405069742998
toElement: div.inner
type: "mousedown"
view: Window
webkitMovementX: 0
webkitMovementY: 0
which: 1
x: 464
y: 85
__proto__: MouseEvent

値によってはさらに情報構造を持つものもあります。

クリックしたオブジェクトの実体を参照したい場合は「srcElement」で参照できます。

window.onload=function(){
    document.onmousedown=function(e){
        var element = e.srcElement;
        alert(element.innerHTML);
    }
}

 

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません