What is the difference between button and span when invoke focus?

HTML code fragment:

<div contenteditable='true' id="txt">123<b>456</b>789</div> 
<button onclick="get()">Click Me</button> 
<span onclick="get()">Click Me</span> 
<script>   
  function get(){
      document.getElementById('txt').focus()
  }
</script>

• Click the node named txt, set the cursor before 7,and then click Button.
  Watch the div's cursor position.

• Click the node named txt, set the cursor before 7,and then click Span.
  Watch the div's cursor position

Compare the div's cursor position,
You will find that the Button click event does not change the div's original cursor position.
But the Span click event does.

That is really weird, so what is happening here?
(My test is based on WebKit browsers.)