clickoutside-event

Syntax

clickoutside-event: true|false [continue] [every (time)] [after (time)][, (class)...];

continue = Continue the event flow after the clickoutside event has fired.

true/false = Set or unset the clickoutside event on the target selector.

The clickoutside event is a special Active CSS event. It is not native to the browser.

Running this action command, when set to true, will cause an internal event to be created that will be fired whenever the user clicks outside of the specified element.

You can use it to close a popup window when someone clicks outside it, or stop someone leaving a form until it has been saved. We use it on our search box to close the popup results when someone clicks outside it.

When set to false on the same target selector, the clickoutside event will be turned off and the event will no longer fire.

Note that technically it is possible to have more than one clickoutside event active on the page at any one time.

clickoutside-event

Click on a button to set up a clickoutside event on the green box below. Then try to click on something in the page which will do something. The first button will forbid you to continue. The second button will allow you to continue. In both cases, an alert will display when you click outside the green box. Then after this, the clickoutside event will be turned off.

#blockingBoxButton:click {
    #blockingBox {
        clickoutside-event: true;
    }
    #blockMessage {
        render: "You just set up a blocking clickoutside event on the box.";
    }
}
#nonBlockingBoxButton:click {
    #blockingBox {
        clickoutside-event: true continue;
    }
    #blockMessage {
        render: "You just set up a non-blocking clickoutside event on the box.";
    }
}
#blockingBox:clickoutside {
    clickoutside-event: false;
    alert: "Is it going to continue on to the destination? Click ok to find out!";
    #blockMessage {
        render: "";
    }
}

<p>Click on a button to set up a clickoutside event on the green box below. Then try to click on something in the page which will do something. The first button will forbid you to continue. The second button will allow you to continue. In both cases, an alert will display when you click outside the green box. Then after this, the clickoutside event will be turned off.</p>

<button id="blockingBoxButton">Put a blocking clickoutside event on the green box</button>
<button id="nonBlockingBoxButton">Put a non-blocking clickoutside event on the green box</button>
<br>
<div id="blockingBox" class="squareBox"></div>
<p id="blockMessage"></div>

.squareBox {
    display: inline-block;
    width: 150px;
    height: 150px;
    margin-right: 20px;
    color: #fff;
    text-align: center;
}

#blockingBox {
    background-color: green;
}

Action commands: click-on-previous-cycle Action commands: clone