CanJS on click outside of component effecting component

I would like to add an event listener in in <some-component> that reacts to the button.

<some-component></some-component>
<button class="click">click here</button>

I am sure this is really simple. I am very new to CanJS and working on it.

<can-component tag="some-component">
<style type="less">
    <!-- stuff -->
</style>
<template>
    <!-- stuff -->
</template>
<script type="view-model">
import $ from 'jquery';
import Map from 'can/map/';
import 'can/map/define/';

export default Map.extend({
  define: {
    message: {
      value: 'This is the side-panels component'
    }
  }
});
</script>
</can-component>

I tried adding a $('body').on('click', '.click', function() {}); to the component and it didn't seem to work. Been reading a lot of documentation, but I am still missing some fundamental understanding.

UPDATE

I tried this:

<some-component-main>
    <some-component></some-component>
    <button class="click">click here</button>
</some-component-main>

with the event listener in some-component-main

events: {
  ".click click": function(){
    console.log("here I am");
  }
},

But that also didn't work.

<some-component-main>
    <some-component></some-component>
    <button class="click">click here</button>
</some-component-main>

with the event listener in some-component-main

events: {
  ".click click": function(){
    console.log("here I am");
  }
},

This did work once I realized that components ending with a number causes other issues that was preventing it.