Problem with handlebar of phone field

I have copied

clients/base/fields/phone/detail.hbs

to

custom/clients/base/fields/phone/detail.hbs

And done modification like this:

{{#if value}}

  {{#if value}}

  <img style="cursor:pointer;float:left;margin-right:3px;padding-top:2px" src="custom/images/call-icon.png" onclick="connectcall('{{value}}');">

  {{/if}}

  <div class="ellipsis_inline" data-placement="bottom" title="{{value}}">

    {{#if skypeValue}}

        <a href="callto:{{skypeValue}}">

        {{value}}

    </a>

    {{else}}

  {{value}}

  {{/if}}

  </div>

{{/if}}

Its working like as shown in image,

1.png

But due to the SugarCRM 7 inline editing feature, when I click on my call icon,

it is going into editing field, instead of calling my javascript function "connectcall".

2.png

Done the same thing for list.hbs as well, it is working on list view.

But due to the SugarCRM 7 inline editing feature, it is not working here.

I don't want to stop the default behaviour of inline editing, and also want to achieve javascript call on click of phone icon.