1. 首页
  2. 问题列表
  3. 是否使用具有相同Z索引的html标记？
提问者：小点点

是否使用具有相同Z索引的html<a>标记？

我有滑块和当我鼠标移过滑块播放按钮是显示，但滑块图像是在一个标签和当播放按钮不隐藏我不能点击图像在一个标签内。 我试着为两个（滑块图像和播放按钮）设置相同的Z索引，但仍然不工作

我需要点击播放按钮时，它显示和去链接放置在这个播放按钮底部，如果可能的话请帮助，并对不起我的英语不好。

主要问题:我怎样才能点击播放按钮和重定向到标签内的链接？

下面是滑块在鼠标移过时的图像，以及鼠标离开滑块时的图像

下面是我的html代码:

null

<style type="text/css">
    #slider-play-button-container{
        position: absolute;
        z-index: 2;
        left: 0;
        right: 0;
        text-align: center;
        cursor: pointer;
    }
    #slider-play-button{
        position: relative;
        top: 25vh;
        width: 2vw;
        opacity: 0;
    }
    .slide-img{
        width: 100%;
        height: 55vh;
        object-fit: cover;
        border-radius: .7vw;
        overflow:hidden;
    }
</style>

<main class=content>
  <span id="slider-play-button-container"><img src="https://i.imgur.com/md7vyI8.png" id="slider-play-button"></span>
  <div id="slider">
    <a href="Link to go after play button click" target="_Blank">
      <h3 class="slider-movie-name">ჯონ ვიკი: III თავი - პარაბელუმი</h3>
      <img src="https://i.imgur.com/OP3AITl.jpg" class="slide-img">
    </a>
    <a href="Another link to go after play button click" target="_Blank">
      <h3 class="slider-movie-name">შურისმაძიებლები: დასასრული</h3>
      <img src="https://i.imgur.com/3vDzVHa.jpg" class="slide-img">
    </a>
  </div>
</main>

<script>

    function bid(n){return document.getElementById(n)}
    function qs(n){return document.querySelector(n)}
    function qsa(n){return document.querySelectorAll(n)}

    let slider = bid('slider');

    let arrowTop = bid('slide_arrow_top');
    let arrowBottom = bid('slide_arrow_bottom');

    let sliderImage = qsa('.slide-img');
    let sliderPlayButtonContainer = bid('slider-play-button-container');
    let sliderPlayButton = bid('slider-play-button');

    let count = 0;
    let imageOffset = 0;
    
    let imgOffset = 0;
    var slideInterval;
    let sliderImageOffset;
    
    
    /* autoscroll */
    
    window.addEventListener('load',winLoadForSlide);
    function winLoadForSlide(){
    
        /* slider */
        slider.addEventListener('wheel',slideMouseScroll);
        arrowBottom.addEventListener('click',scrollBottom);
        arrowTop.addEventListener('click',scrollTop);
    
        function bottomSlide(){
            if (count < 4) {
                count++;
            }
            imageOffset = sliderImage[count].offsetTop;
            slider.scrollTo(0,imageOffset);
        }
    
        function topSlide(){
            if (count > 0) {
                count--;
            }
            imageOffset = sliderImage[count].offsetTop;
            slider.scrollTo(0,imageOffset-5);
        }
    
        function slideMouseScroll(){
            if (event.deltaY < 0){
                topSlide();
            }else if (event.deltaY > 0){
                bottomSlide();
            }
        }
    
        function scrollBottom(){
            bottomSlide();
        }
    
        function scrollTop(){
            topSlide();
        }
    
        slideInterval = setInterval(repeatScroll,100 * 20);
    
        function showSliderPlayButton(){
            sliderPlayButton.style.transform = "scale(5)";
            sliderPlayButton.style.opacity = "1";
            sliderPlayButton.style.transition = "250ms";
        }
        function hideSliderPlayButton(){
            sliderPlayButton.style.transform = "scale(1)";
            sliderPlayButton.style.opacity = "0";
            sliderPlayButton.style.transition = "250ms";
        }
    
        [slider,arrowBottom,arrowTop,sliderPlayButtonContainer,sliderPlayButton].forEach(slideElements => {
            slideElements.addEventListener('mouseover',()=>{
                clearInterval(slideInterval);
            });
            slideElements.ondragstart = function(){ return false; }
        });
    
        [slider,sliderPlayButtonContainer,sliderPlayButton].forEach(slideElementsWithoutButtons => {
            slideElementsWithoutButtons.addEventListener('mouseover',()=>{
                showSliderPlayButton();
            });
        });
    
        slider.addEventListener('mouseleave',()=>{
            slideInterval = setInterval(repeatScroll,100 * 20);
            hideSliderPlayButton();
        });
    
        function repeatScroll(){
    
                    if( (slider.scrollHeight - slider.scrollTop - slider.clientHeight) !== 4 ){
                        if (imgOffset < 4) {
                            imgOffset++;
                        }
                        sliderImageOffset = sliderImage[imgOffset].offsetTop;
                        slider.scrollTo(0,sliderImageOffset);
    
                    }else{
                        imgOffset = 0;
                        slider.scrollTo(0,0);
                    }
        }
    
        /* END slider */
    }
    
    /* END autoscroll */

</script>

null


共1个答案

匿名用户

有几种方法可以解决这个问题。

一种方法是完全去掉锚标记，将每个图像分组到一个容器中，并为每个图像分配一个单击事件侦听器以最终打开链接。 如果您随后向执行event.PreventDefault()；的箭头按钮添加另一个click侦听器，则click事件将传递到下面的对象-包括图像的

。

如果你想保留锚标签，事情有点棘手。 幸运的是，有一些有用的JavaScript函数，最重要的是document.elementsFromPoint（x，y)。

如果你给这个函数输入当前的鼠标坐标--例如通过点击箭头按钮--它将返回这个点下面的对象数组。 这个数组在后台包含锚元素，因此只需将它从数组中取出，获取分配给它的链接，并使用window.open()命令打开它。

下面是一个例子:

null

function bid(n) {
  return document.getElementById(n)
}
let sliderPlayButtonContainer = bid('slider-play-button-container');
let sliderPlayButton = bid('slider-play-button');

sliderPlayButtonContainer.addEventListener('click', (event) => {
  var list = document.elementsFromPoint(event.clientX, event.clientY)
  var anchorElement = list.find(element => element instanceof HTMLImageElement && element.className == 'slide-img').parentElement;
  window.open(anchorElement.href, anchorElement.target);
});


function showSliderPlayButton() {
  sliderPlayButton.style.transform = "scale(5)";
  sliderPlayButton.style.opacity = "1";
  sliderPlayButton.style.transition = "250ms";
}


sliderPlayButtonContainer.addEventListener('mouseover', () => {
  showSliderPlayButton();
});
#slider-play-button-container {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  text-align: center;
  cursor: pointer;
}

#slider-play-button {
  position: relative;
  top: 25vh;
  width: 2vw;
  opacity: 1;
}

.slide-img {
  width: 100%;
  height: 55vh;
  object-fit: cover;
  border-radius: .7vw;
  overflow: hidden;
}
<span id="slider-play-button-container"><img src="https://i.imgur.com/md7vyI8.png" id="slider-play-button"></span>
<div id="slider">
  <a href="https://www.startpage.com" target="_blank">
    <h3 class="slider-movie-name">ჯონ ვიკი: III თავი - პარაბელუმი</h3>
    <img src="https://i.imgur.com/OP3AITl.jpg" class="slide-img">
  </a>
</div>

相关问题