第一元素点击功能在 Owl Carousal 中不起作用

Question

我有一个轮播是通过猫头鹰轮播整合生成的。这些图像 div 包含两个通过 CSS 动画制作动画的按钮。按钮实际上是

<a>

标签。 呈现页面时，这些

<a>

标签的点击功能在第一个元素（div）中不起作用。我也尝试过

event.preventDefault()

方法，但没有任何效果。以下是我的代码

HTML

<a href  onClick={(e) => viewMovie(e,movieBannertop)}
style={{ textDecoration: "none" }}>
Now Showing
</a>

功能

  const viewMovie = (e,movieData) => {
    e.preventDefault();
    if (movieData.bookingOpen) {
      localStorage.setItem("movieName", movieData.name);
      localStorage.setItem("movieId", movieData.id);
      navigate(`/movieBooking?movieid=${movieData.id}&name=${movieData.name}`);
    } else {
      setOpen(true);
    }
  };

CSS

display:inline-block;
width:150px;
height:50px;
text-align:center;
line-height:50px;
border:1px solid #ff4444;
margin-right:-900px;
background:transparent;
color:#ffffff;
margin-top:10px;
    -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;