CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Timilehin Osaze Adegbulugbe
Timilehin Osaze Adegbulugbe

Reputation: 63

I only want to click on a div without clicking the link in a div

Please I am trying to click on a div(mark) without clicking the link. I have set the link to jquery cdn but when i click it, i only want the div (outer) to show to display block without going to the link. My code is below. When i click the circle on the bottom-right. it will display a big mark on the center of the parent div. But then it is going to the link, which i dont want.

$(".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>

Upvotes: 0

Views: 446

Answers (3)

G&#252;ney Saramalı
G&#252;ney Saramalı

Reputation: 799

You dont have to use <a> only for refereance at all.

JS

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

HTML

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

Upvotes: 1

Friday Ameh
Friday Ameh

Reputation: 1684

Remove this on your code. its is going because on page refreshed it will triggers the link . I remove the link and every works fine.

<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>

Upvotes: 0

Antoine Louis
Antoine Louis

Reputation: 71

Quick fix : pass the e argument to your event listener so you can call preventDefault method on it.

Why don't you remove the link if you don't use it?

$(".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>

Upvotes: 1

Related Questions