使 div 个容器可点击，导出按钮除外

Question

我想创建一个 Highcharts 图表，整个 div 具有 onclick 功能，但我不希望导出按钮处理点击事件。它应该像普通的导出按钮一样反应。

我尝试了一些 jQuery 技巧来避免它，通过获取 Highcharts 按钮 class：highcharts-button，但它不起作用：

jQuery("#container").on('click', ':not(.highcharts-button, .highcharts-button *)', function(e){
        e.stopPropagation();
        alert('CLICK');
    });

这是我的JSFiddle。（问题是：我不想在单击“导出”按钮时看到弹出的警报）。

Answer 1

使用event.preventDefault()。在你的情况下 e.preventDefault()

jQuery("#container").on('click', ':not(.highcharts-button, .highcharts-button *)', function(e){
    e.preventDefault();
    alert('CLICK');
});

Answer 2

一种方法是过滤事件目标，例如：

jQuery("#container").on('click', function(e){      
    if ($(e.target).closest('.highcharts-button, .highcharts-contextmenu').length) return;
    e.stopPropagation();
    alert('CLICK');
});

使 div 个容器可点击，导出按钮除外

Make div container clickable, except export button

jquery

onclick

highcharts

-jsFiddle-