首页 > 如何获取被click的DOM?

如何获取被click的DOM?

写了一段html给video的控件,想每次点击时变更button的内容,但是不知道如何获取被点击的这个button。用了event.target结果多数浏览器还好,但火狐就报错。查了下,说event或window.event并不是标准用法。

html:

        <video id="v1" src="2016-07-21_01-01-21_45791600.mp4">你的浏览器不支持HTML5</video>
        <button type="button" onclick="playbyid(v1)">播放</button>

js:

function playbyid(vid) {
    thisbutton = event.target;
    thisbutton.innerHTML = '暂停';
    //var vid = thisbutton.id + 'v';
    console.log(vid);
    //var video = document.getElementById(vid);
    var video = vid;
    if (video.paused) {
        video.play();
        video.addEventListener('ended', function() {
            thisbutton.innerHTML = '播放';
            video.removeEventListener;
        }, false);
    } else {
        video.pause();
        thisbutton.innerHTML = '播放';
    }
}

所以我该如何获取被click的这个button?

PS:不要告诉我用onclick调用的函数传参数啊,因为页面上的视频可能很多,我正在考虑如何把id全部都去掉呢,不要再给button加id了。


function(e) {
  e.target === "className"
}

html:

<video id="v1" src="2016-07-21_01-01-21_45791600.mp4">你的浏览器不支持HTML5</video>
<button type="button" data-video-id="v1" onclick="playbyid(this)">播放</button>

js:

function playbyid(thisbutton) {
    thisbutton.innerHTML = '暂停';
    var vid = thisbutton.getAttribute('data-video-id');
    console.log(vid);
    
    var video = document.getElementById(vid);
    //var video = vid;
    if (video.paused) {
        video.play();
        video.addEventListener('ended', function() {
            thisbutton.innerHTML = '播放';
            video.removeEventListener;
        }, false);
    } else {
        video.pause();
        thisbutton.innerHTML = '播放';
    }
}

兼容一下

var ele= event.target || event.srcElement;

你试试插入下面代码看看tar是不是你要的!

var e = e || window.event;
var tar = e.target || e.srcElement;

附图一张供参考:


 <button type="button" onclick="playbyid(this, v1)">播放</button>

 playbyid = function(ele, vid){
     var button = ele; 
 }
【热门文章】
【热门文章】