Gradient Filter prevents click event in an IE9 DIV where there is no text

Question

I hate to dredge up IE9 issues, but amazingly I haven't seen a post on this.

If a div has a gradient filter set, the click event no longer works on "empty" areas of a div. If the div contains text, the click event will work on the text only.

Any ideas of a way to overcome this?

I've written a gradient generator and would like it to be ie9 compatible. So solutions need to be specific to using filter as opposed to replacing it with something else.

Of course the example snippet below need to be run in IE9 emulation mode to see the problem.

var test1 = document.getElementById("test1");
test1.style.filter = "progid:DXImageTransform.Microsoft.gradient( startColorstr='#327796', endColorstr='#ffffff',GradientType=0)";
test1.addEventListener("click", function() {
  console.log("addEventListener clicked 1")
});

var test2 = document.getElementById("test2");
test2.style.filter = "progid:DXImageTransform.Microsoft.gradient( startColorstr='#327796', endColorstr='#ffffff',GradientType=0)";
test2.addEventListener("click", function() {
  console.log("addEventListener clicked 2")
});

var test3 = document.getElementById("test3");
test3.addEventListener("click", function() {
  console.log("addEventListener clicked 3")
});

.div {
  width: 70px;
  height: 70px;
  border: 1px solid black;
}

<div class="div" id="test1"></div>
<div class="div" id="test2">Some<br>Text</div>
<div class="div" id="test3"></div>

Answer 1

OK - The simplest solution seems to be inserting a child div with height and width equal to 100%. This passes the event up to the parent div without any fuss.