我只想点击div而不点击div中的链接

时间：2018-04-10 13:32:02

标签： javascript jquery html css

请尝试点击div（标记）而不点击链接。我已经设置了jquery cdn的链接，但是当我点击它时，我只希望div（外部）显示到显示块而不进入链接。我的代码如下。当我点击右下角的圆圈时。它会在父div的中心显示一个大标记。但是接下来它就是我不想要的链接。

$(".news-box").click(function() {
  window.location = $(this).find("a").attr("href");
  return false;
});
$(".news-box").mouseenter(function() {
  $(".circle").css("display", "block");
}).mouseleave(function() {
  $(".circle").css("display", "none");
});
$(".circle").on("click", function() {
  $(".outer").css("display", "block");
});
img {
  width: 100px;
  height: 94px;
  text-align: center;
  vertical-align: top;
  position: relative;
  top: 7px;
  left: 10px;
}

.news-box {
  width: 350px;
  height: 100px;
  border: 3px solid red;
  position: relative;
}

.img-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

.news-descript {
  margin-top: 15px;
}

a {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  bottom: 0;
  right: 0;
  cursor: pointer;
}

a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}

.circle {
  width: 22px;
  height: 22px;
  background-color: rgba(13, 16, 18, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 1s linear;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 4;
  display: none;
}

.circle:hover {
  background-color: rgba(13, 16, 18, 1.0);
}

.mark {
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  transform: rotate(45deg);
  background-color: transparent;
  width: 7px;
  height: 15px;
  position: relative;
  left: 6px;
  top: 2px;
}

.black {
  width: 350px;
  height: 100px;
  background: rgba(0, 0, 0, 0.5);
}

.big-mark {
  border-right: 5px solid white;
  border-bottom: 5px solid white;
  transform: rotate(45deg);
  width: 30px;
  height: 90px;
  margin: auto;
}

.outer {
  top: -3px;
  right: -3px;
  position: absolute;
  z-index: 3;
  display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-box">
  <a href="https://code.jquery.com/"></a>
  <div class="circle">
    <div class="mark"></div>
  </div>
  <div class="outer">
    <div class="black">
      <div class="big-mark">

      </div>
    </div>
  </div>
  <div class="inside">
    <div class="row">
      <div class="col-xs-4 position one">
        <div class="img-box">
          <img src="https://preview.ibb.co/gJaSjx/timi_small.jpg">
        </div>
      </div>
      <div class="col-xs-8">
        <div class="news-descript">
          <p>Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </div>
  </div>
</div>

3 个答案:

答案 0 :(得分：1)

快速修复： 将e参数传递给您的事件监听器，以便您可以在其上调用preventDefault方法。

如果不使用链接，为什么不删除链接？

$(".news-box").click(function(e) {
  e.preventDefault();
});
$(".news-box").mouseenter(function() {
    $(".circle").css("display", "block");
}).mouseleave(function() {
    $(".circle").css("display", "none");
});
$(".circle").on("click", function() {
	$(".outer").css("display", "block");
});
		img {
			width: 100px;
			height: 94px;
			text-align: center;
			vertical-align: top;
			position: relative;
			top: 7px;
    		left: 10px;
		}
		.news-box {
			width: 350px;
			height: 100px;
			border: 3px solid red;
			position: relative;

		}
		.img-box {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 80px;
			height: 80px;
		}
		.news-descript {
			margin-top: 15px;
			
		}
		a {
			position: absolute;
			top:0;
			left:0;
			z-index: 1;
			bottom: 0;
			right:0;
			cursor: pointer;
		}

		
		a:-webkit-any-link {
		    color: -webkit-link;
		    cursor: pointer;
		    text-decoration: underline;
		}
		.circle {
			width: 22px;
			height: 22px;
			background-color: rgba(13, 16, 18, 0.5);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background-color 1s linear; 
			position: absolute;
			bottom:0;
			right:0;
			z-index: 4;
			display: none;
		}
		.circle:hover {
			background-color: rgba(13, 16, 18, 1.0);
		}
		.mark {
			border-right: 3px solid white;
			border-bottom: 3px solid white;
			transform: rotate(45deg);
			background-color: transparent;
			width: 7px;
			height: 15px;
			position: relative;
			left: 6px;
			top: 2px;
		}
		.black {
			width: 350px;
			height: 100px;
			background: rgba(0, 0, 0, 0.5);
		}
		.big-mark {
			border-right: 5px solid white;
			border-bottom: 5px solid white;
			transform: rotate(45deg);
			width: 30px;
			height: 90px;
			margin: auto;
			
		}
		.outer {
			top: -3px;
			right: -3px;
			position: absolute;
			z-index: 3;
			display: none;
		}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-box">
		<a href="https://code.jquery.com/"></a>
		<div class="circle">
			<div class="mark"></div>
		</div>
		<div class="outer">
			<div class="black">
				<div class="big-mark">
					
				</div>
			</div>
		</div>
		<div class="inside"> 
			<div class="row">
				<div class="col-xs-4 position one">
					<div class="img-box">
						<img  src="https://preview.ibb.co/gJaSjx/timi_small.jpg" >
					</div>
				</div>
				<div class="col-xs-8">
					<div class="news-descript">
						<p>Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					</div>	
				</div>
			</div>	
		</div>
	</div>

答案 1 :(得分：1)

您根本不必使用<a>进行推荐。

JS 

$(".news-box").click(function() {
      window.location = $(this).attr("data-href"); 
      return false;    
});

HTML 

<div class="news-box" data-href="https://code.jquery.com/">

答案 2 :(得分：0)

删除代码中的。它正在进行，因为在页面刷新时它将触发链接。我删除链接，每个工作正常。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-box">
        <div class="circle">
            <div class="mark"></div>
        </div>
        <div class="outer">
            <div class="black">
                <div class="big-mark">

                </div>
            </div>
        </div>
        <div class="inside"> 
            <div class="row">
                <div class="col-xs-4 position one">
                    <div class="img-box">
                        <img  src="https://preview.ibb.co/gJaSjx/timi_small.jpg" >
                    </div>
                </div>
                <div class="col-xs-8">
                    <div class="news-descript">
                        <p>Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>  
                </div>
            </div>  
        </div>
    </div>
相关问题
最新问题