Disabling click events in XPM editing (Razor)

Question

I've been trying to solve this for some time now, but I can't come up with something that works properly.

You see, on our site there are a lot of clickable images or divs present, provided with componentlinks that fall over the entire image. If you activate XPM and try to select the component, it will fire its component link click event, and route you to the correct page.

I've been searching for a quick solution to disable this behaviour only when editing, and so far I've come up with a couple of workarounds that quite frankly aren't what I'm looking for.

You can for instance use the fantastic Razor Mediator condition (IsSiteEditEnabled), however, this function always resolves to true if the publication/page/server you're currently are is enabled for site edit. This means that if you insert template-specific code such as

@if(!IsSiteEditEnabled){
<a tridion:href="#"> other code, ending in closing of </a>...
}

Will NOT output a link when site edit (XPM) is NOT activated, but can be activated. Staging servers, in short.

Unless there is no other option, I'm going to need a Live publication server to make the code work, but this will pose the problem that editors will think links are broken on the staging servers.

I have the feeling that there is something that I'm missing here. I believe that this issue might've been encountered by someone like you :)

this is one of the blocks

<article class="block-2x2 banner">
    <tcdl:ComponentField name="component_link"></tcdl:ComponentField>
    @if(!IsSiteEditEnabled){
        @:<a tridion:href="@Fields.component_link">
        }
        <div class="image-container">
            <tcdl:ComponentField name="image"><img src="@Fields.image" alt="@Fields.image.altText"></tcdl:ComponentField>
        </div>
        <div class="hgroup">
            <h4 class="primary-title">@RenderComponentField("header", 0)</h4>
            <h5 class="secondary-title">@RenderComponentField("title", 0)</h5>
        </div>
    @if(!IsSiteEditEnabled){</a>}
</article>

Answer 1

You might consider just putting in some form of else like this:

@if(!IsSiteEditEnabled){
   <a tridion:href="#"> other code, ending in closing of </a>...
}else{
   <a href="#" onclick="alert('Image links not supported in XPM');"></a>
}

This should at least explain why the links are not working for your editors. Although I have not tested if this actually solves your problem.

It would be cleaner to just add a class="NoClickImageLink" attribute, and add a JavaScript action to all tags with that class when the page loads which associates the onclic event with the tag..

Answer 2

When using JQuery you can prevent anchor links to work by using this code:

$('a').click(function(event) {
    event.preventDefault();
});

$(this) would reference the clicked element which you can then verify in the case you need some anchor links to keep working.

This code can be injected in the case you are editing with XPM and would greatly simplify your templates.

PS. I didn't test this suggestion.