Question

美好的一天，

问题

我遇到的问题可能非常简单。我尝试在我的代码中创建一个事件处理程序，当在选项卡界面上单击ui标题时，该处理程序仅运行。我可以让它运行正常，但是，我无法仅将点击限制为标题，单击标签也会调用点击事件（即使我已经明确设置了：not（）过滤器关于李元素。）

Html代码

<div id="iframescroll">
    <ul>
        <li><a href="#page1">Page 1</a></li>
        <li><a href="#page2">Page 2</a></li>
    </ul>
    <div id='page1'>Hey, this is page 1</div>
    <div id='page2'>Howdie -welocme to page 2</div>
</div>

额外css

#iframescroll{
    max-width: 415px;
}

ul.ui-widget-header{
    cursor: zoom-out;
}

jQuery代码

$(function () {
    // set up tabs
    var $tabs = $("#iframescroll").tabs();

    // method to expand/contract tabs window
    var isWide = false;
    $('.ui-widget-header:not(.ui-state-default)').on('click', function (e) {
        e.preventDefault();
        if (!isWide) {
            $('#iframescroll').css('max-width', 415);
            $(this).css('cursor', 'zoom-out');
        } else {
            $('#iframescroll').css('max-width', 1200);
            $(this).css('cursor', 'zoom-in');
        }
        isWide = !isWide;
        return false;
    });
});

我已经设置了一个jsfiddle来演示这个问题，因为要想象我尝试纯粹代码的方式并不容易：the jsfiddle

寻找答案。

[edit] - 我没有坚持上面的结构，所以如果它需要结构改变才能使其发挥作用，那就很难聚会。

Answer 1

e.stopPropagation();

该函数将停止click事件冒泡到父元素并触发标题单击功能。这是变化的小提琴。只需将以下函数添加到您的代码中即可 http://jsfiddle.net/jbeeio/RA2q8/

$('.ui-widget-header li').on('click',function(e){
 e.stopPropagation();
});

添加此功能也会使您的'：not（.ui-state-default）'变得不必要。

Answer 2

使用e.stopPropagation（）事件

$(function () {
// set up tabs
var $tabs = $("#iframescroll").tabs();

// method to expand/contract tabs window
var isWide = false;
$('.ui-widget-header:not(.ui-state-default)').on('click', function (e) {
    e.stopPropagation();
    if (!isWide) {
        $('#iframescroll').css('max-width', 415);
        $(this).css('cursor', 'zoom-out');
    } else {
        $('#iframescroll').css('max-width', 1200);
        $(this).css('cursor', 'zoom-in');
    }
    isWide = !isWide;
    return false;
});
});

如何限制jquery单击ui-header只有标题而不是标签

2 个答案: