Adding preventDefault() and stopPropagation()

Question

I am new in coding in general, most especially javascript.

I made a flip div effect. But I noticed that when clicking one .button to trigger the flip effect, all the other divs that are similar in a page are also triggered. So I am trying to add both .preventDefault() and .stopPropagation() when flipping a div, so far its a big FAIL

As a starter, I came up with this code..

$('.insidecontent .button').click(function () {
    $('.insidecontent').addClass('flipped');
    $('.insidecontent').removeClass('unflipped');
});
$('.insidecontent .button-c').click(function () {
    $('.insidecontent').removeClass('flipped');
    $('.insidecontent').addClass('unflipped');
});

Demo here: http://jsfiddle.net/uriri/ke7kqvvk/3/

A friend of mine suggested that I should use .parents() on the current target inside the .click() function. But after reading the jQuery documentation, I am totally lost!

Answer 1

You don't need to stop click event or prevent default. You just need to flip right element. Right not you are adding/removing classes to/from all .insidecontent, while you need to select only parent element of the clicked button:

$('.insidecontent .button').click(function () {
    $(this).closest('.insidecontent').addClass('flipped').removeClass('unflipped');
});
$('.insidecontent .button-c').click(function () {
    $(this).closest('.insidecontent').removeClass('flipped').addClass('unflipped');
});

Demo: http://jsfiddle.net/ke7kqvvk/5/

Or shorter optimized version can be:

$('.insidecontent').find('.button, .button-c').click(function () {
    $(this).closest('.insidecontent').toggleClass('flipped unflipped');
});

Demo: http://jsfiddle.net/ke7kqvvk/6/

Answer 2

Have you learned about the "this" keyword yet? In a JQuery click handler, $(this) refers to the element that the handler is called on. So, if you put removeClass and addClass methods on $(this) it will only affect that one element. You can traverse using this too... so your code would look like this:

    $('.insidecontent .button').click(function () {
    $(this).parent().find('.insidecontent').addClass('flipped');
    $(this).parent().find('.insidecontent').removeClass('unflipped');
});

$('.insidecontent .button-c').click(function () {
    $(this).parent().find('.insidecontent').removeClass('flipped');
    $(this).parent().find('.insidecontent').addClass('unflipped');
});

you may not even need the find method in your case, but it is better to be explicit.

Answer 3

preventDefault() and stopPropagation() won't help here. You need to use a selector that's more specific than all the elements with the same class.

$('.insidecontent .button').click(function () {
    $(this).closest('.insidecontent').addClass('flipped').removeClass('unflipped');
});
$('.insidecontent .button-c').click(function () {
    $(this).closest('.insidecontent').removeClass('flipped').addClass('unflipped');
});

.content{
	position: relative;
	background: #ffffff;
	width:100%;
	text-align:center;
	display: -webkit-box;
	display: -moz-box;
	display: box;

	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	box-orient: vertical;

	-webkit-box-align: center;
	-moz-box-align: center;
	box-align: center;
}

._hasdata .insidecontent {
	position: relative;
	background: #ffffff;
	margin-bottom:30px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-o-perspective: 1000;
	perspective: 1000px;
}

._hasdata .insidecontent .front {
	position: relative;
	z-index: 900;
	width: 200px;
	height: 200px;
	background: #ededed;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
	transform: rotateX(0deg) rotateY(0deg);
}

._hasdata .insidecontent .front .fcontent {
	position:relative;
	top:30%;
	}

._hasdata .insidecontent.flipped .front {
	z-index: 900;
	-webkit-transform: rotateX(0deg) rotateY(180deg);
	-moz-transform: rotateX(0deg) rotateY(180deg);
	transform: rotateX(0deg) rotateY(180deg);
}

._hasdata .insidecontent .back {
	position: absolute;
	width: 200px;
	height: 200px;
	top: 0;
	left: 0;
	z-index: 800;
	-webkit-transform: rotateX(0deg) rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	transform: rotateX(0deg) rotateY(-180deg);
}

._hasdata .insidecontent.flipped .back {
	z-index: 1000;
	background: #E7E7E7;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
	transform: rotateX(0deg) rotateY(0deg);
}

._hasdata .insidecontent .front,
._hasdata .insidecontent .back {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}

._hasdata .insidecontent .button,
._hasdata .insidecontent.flipped .button-c {
	z-index: 15;
	display: block;
	position: absolute;
	bottom: 0;
	margin: -30px 20px 20px;
	opacity: 0;
	-webkit-transition: opacity .1s linear;
	-moz-transition: opacity .1s linear;
	transition: opacity .1s linear;
}

._hasdata .insidecontent:hover .button,
._hasdata .insidecontent.flipped:hover .button-c {
	opacity: 0.8;
}

._hasdata .insidecontent.unflipped .button-c {
	display: none;
}

._hasdata .insidecontent.flipped ._lar {
	height: 100%;
}

._hasdata .insidecontent.unflipped .bcontent {
	display: none;
}

._hasdata .insidecontent.flipped .bcontent {
	top: 30%;
	position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
	<div class="_hasdata">
		<div class="insidecontent initalized unflipped">
			<div class="front">
                <span class="fcontent">FRONT CONTENT<br />HERE</span>
				<a class="btt button">info</a>
			</div>
			<div class="back _lar">
				<div class="bcontent">BACK INFO HERE</div>
				<a class="btt button-c">go back</a>
			</div>
		</div>
	</div>
    	<div class="_hasdata">
		<div class="insidecontent initalized unflipped">
			<div class="front">
                <span class="fcontent">FRONT CONTENT<br />HERE</span>
				<a class="btt button">info</a>
			</div>
			<div class="back _exif">
				<div class="bcontent">BACK INFO HERE</div>
				<a class="btt button-c">go back</a>
			</div>
		</div>
	</div>
</div>