Html怎么动态实现点击事件

Question

image.png
我在最外层的div上放了个id

image.png
当我到页面随意点击一个小视屏是没有进入去

请问怎么实现在页面上任意点击一个小视屏就转换为一个大视屏播放呀！

Answer 1

document.getElementById('VideoId').addEventListener('click', function (ev) {

alert(34)

    <iframe
            src="https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/F24272838/6.live&autoplay=1&accessToken=at.9vxy6ldo3ywyztwe7pg9tlmib71vsxdj-5tpoi9nfnt-14fjhin-2avqs6jp6"
            width="100%"
            height="100%"
            id="ysOpenDevice"
            allowfullscreen
    >
    </iframe>
</div>

<div class="quarter-div ">
    <iframe
            src="https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/F24272838/1.live&autoplay=1&accessToken=at.9vxy6ldo3ywyztwe7pg9tlmib71vsxdj-5tpoi9nfnt-14fjhin-2avqs6jp6"
            width="100%"
            height="100%"
            id="ysOpenDevice1"
            allowfullscreen
    >
    </iframe>
</div>

    <iframe
            src="https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/F24272838/6.live&autoplay=1&accessToken=at.9vxy6ldo3ywyztwe7pg9tlmib71vsxdj-5tpoi9nfnt-14fjhin-2avqs6jp6"
            width="100%"
            height="100%"
            id="ysOpenDevice"
            allowfullscreen
    >
    </iframe>
</div>

<div class="quarter-div ">
    <iframe
            src="https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/F24272838/1.live&autoplay=1&accessToken=at.9vxy6ldo3ywyztwe7pg9tlmib71vsxdj-5tpoi9nfnt-14fjhin-2avqs6jp6"
            width="100%"
            height="100%"
            id="ysOpenDevice1"
            allowfullscreen
    >
    </iframe>
</div>







    var target = ev.target || ev.srcElement;
    console.log(target)

    if (target.nodeName.toLowerCase() == 'button') {
        var e = document.getElementById(target.parentNode.id);
        document.getElementById("VideoId").removeChild(e);
    }