Jquery 单击父对象上的事件不处理子对象
我的网站上有一些方形的div,上面显示文本和一个大图标 我希望在用户单击div时显示一个模式,但是由于图标是一个对象,因此当用户单击div时(仅单击div,而不是单击图标),模式会显示。当他们单击图标时,不会触发单击事件 这是我的JSJquery 单击父对象上的事件不处理子对象,jquery,html,css,Jquery,Html,Css,我的网站上有一些方形的div,上面显示文本和一个大图标 我希望在用户单击div时显示一个模式,但是由于图标是一个对象,因此当用户单击div时(仅单击div,而不是单击图标),模式会显示。当他们单击图标时,不会触发单击事件 这是我的JS (function($) { $('.cbp-ig-grid li').on('click', 'li', function(){ var courseSelected = $(this).find('span').attr('class').spl
(function($) {
$('.cbp-ig-grid li').on('click', 'li', function(){
var courseSelected = $(this).find('span').attr('class').split(' ')[1];
var bodyContent = $('.full_body_content');
bodyContent.addClass('BluredBackground');
bodyContent.before("<div class='selectExamStage'><p>Porfavor escoge que parte del curso deseas practicar</p><div class='ExercisesPartDiv ExercisesPart_1'></div><div class='ExercisesPartDiv ExercisesPart_2'></div><div class='ExercisesPartDiv ExercisesPart_3'></div></div>").slideDown('slow');
bodyContent.before('<div class="blockDiv"></div>');
$('.blockDiv').on('click',function(){
$('.full_body_content').removeClass('BluredBackground');
$('.selectExamStage').hide('slow', function(){ this.remove(); });
$(this).hide('slow', function(){ this.remove(); });
})
})
})(jQuery);
希望有人能帮我做这个试着把这个添加到你的css文件中
object{
pointer-events: none;
}
或者您可以使用
标记而不是为什么不指定一个类并将单击事件绑定到该类?是的,这可能是一个解决方案,但我想知道的是如何将触发器传递给子级,而不是“破解”解决方案创建更多类对象样式就足够了,为什么显示内联块?对象样式就足够了。可以跳过显示内联块。
.cbp-ig-grid {
list-style: none;
padding: 0;
margin: 0;
}
.cbp-ig-grid li {
width: 25%;
float: left;
height: 420px;
text-align: center;
border-top: 0px solid #ddd;
}
/* we are using a combination of borders and box shadows to control the grid lines */
.cbp-ig-grid li:nth-child(-n+3){
border-top: none;
}
/* anchor style */
.cbp-ig-grid li > a {
display: block;
height: 100%;
color: #47a3da;
-webkit-transition: background 0.2s;
-moz-transition: background 0.2s;
transition: background 0.2s;
}
/* the icon with pseudo class for icon font */
.cbp-ig-icon {
width: 180px;
height: 260px;
margin: 0 auto;
padding: 0;
display: block;
-webkit-transition: -webkit-transform 0.2s;
transition: -moz-transform 0.2s;
transition: transform 0.2s;
}
.cbp-ig-icon:before {
font-family: 'besticon';
font-size: 14em;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
object{
pointer-events: none;
}