Enabling click events inside content was the biggest challenge while building this plugin. Please don't use mouseup and mousedown events, they are reserved for mouse dragging events unless you have to use them. In this case you can
disable mouse draggable capabilities by addingmouseDraggable:false in options.
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items : 10
});
$('.link').on('click', function(event){
var $this = $(this);
if($this.hasClass('clicked')){
$this.removeAttr('style').removeClass('clicked');
} else{
$this.css('background','#7fc242').addClass('clicked');
}
});
});
<div id="owl-demo" class="owl-carousel"> <a class="item link"><h1>1</h1></a> <a class="item link"><h1>2</h1></a> <a class="item link"><h1>3</h1></a> <a class="item link"><h1>4</h1></a> <a class="item link"><h1>5</h1></a> <a class="item link"><h1>6</h1></a> <a class="item link"><h1>7</h1></a> <a class="item link"><h1>8</h1></a> <a class="item link"><h1>9</h1></a> <a class="item link"><h1>10</h1></a> <a class="item link"><h1>11</h1></a> <a class="item link"><h1>12</h1></a> <a class="item link"><h1>13</h1></a> <a class="item link"><h1>14</h1></a> <a class="item link"><h1>15</h1></a> <a class="item link"><h1>16</h1></a> </div>
#owl-demo .item{
display: block;
cursor: pointer;
background: #ffd800;
padding: 30px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
#owl-demo .item:hover{
background: #F2CD00;
}