title: Click events on highcharts with multiple series
body: <p>When I have multiple series that have intersecting points on my chart the click events don't seem to fire at all.  Here is an example:</p>
  
  <p><a href="http://jsfiddle.net/agnHV/22/" rel="nofollow">http://jsfiddle.net/agnHV/22/</a></p>
  
  <p>If you take a look at April where all 3 series intersect and try to click on the point it won't do the alert but if you check any of the points that don't intersect they alert properly.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
          $('#container').highcharts({
              chart: {
                  zoomType: 'xy'
              },
              title: {
                  text: 'Average Monthly Weather Data for Tokyo'
              },
              subtitle: {
                  text: 'Source: WorldClimate.com'
              },
              xAxis: [{
                  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
              }],
              yAxis: [{ // Primary yAxis
                  labels: {
                      formatter: function() {
                          return this.value +'°C';
                      },
                      style: {
                          color: '#89A54E'
                      }
                  },
                  title: {
                      text: 'Temperature',
                      style: {
                          color: '#89A54E'
                      }
                  },
                  opposite: true
      
              }, { // Secondary yAxis
                  gridLineWidth: 0,
                  title: {
                      text: 'Rainfall',
                      style: {
                          color: '#4572A7'
                      }
                  },
                  labels: {
                      formatter: function() {
                          return this.value +' mm';
                      },
                      style: {
                          color: '#4572A7'
                      }
                  }
      
              }, { // Tertiary yAxis
                  gridLineWidth: 0,
                  title: {
                      text: 'Sea-Level Pressure',
                      style: {
                          color: '#AA4643'
                      }
                  },
                  labels: {
                      formatter: function() {
                          return this.value +' mb';
                      },
                      style: {
                          color: '#AA4643'
                      }
                  },
                  opposite: true
              }],
              tooltip: {
                  shared: true
              },
              legend: {
                  layout: 'vertical',
                  align: 'left',
                  x: 120,
                  verticalAlign: 'top',
                  y: 80,
                  floating: true,
                  backgroundColor: '#FFFFFF'
              },
              plotOptions:{
                  column:{
                      point:{
                          events:{
                              click:function(){
                              alert('aaa');
                              }
                          }
                      }
                  }
              },
              series: [{
                  name: 'Rainfall',
                  color: '#4572A7',
                  type: 'column',
                  yAxis: 1,
                  data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                  tooltip: {
                      valueSuffix: ' mm'
                  }
      
              }, {
                  name: 'Sea-Level Pressure',
                  type: 'spline',
                  color: '#AA4643',
                  yAxis: 2,
                  data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
                  marker: {
                      enabled: false
                  },
                  dashStyle: 'shortdot',
                  tooltip: {
                      valueSuffix: ' mb'
                  }
      
              }, {
                  name: 'Temperature',
                  color: '#89A54E',
                  type: 'spline',
                  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                  tooltip: {
                      valueSuffix: ' °C'
                  },
                  index: 1,
                  zIndex: 99,
                  events: {
                   click: function(e) {
                     alert('boom');
                     console.log("CLICKY");
                    }
                  }
              }]
          });
      });
      </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've tried adding index/zIndex to give priority to certain points but it doesn't seem to help.</p>