1

I have an external svg that I embed via an tag. I then use javascript to insert mouse handlers to -s in order to "rotate" them with the mouse. (Just like knobs on a stereo.)

Now, every once in a while, this doesn't work. Firefox then doesn't show the drag-cursor which I told it to show but instead the crossed-out-circle cursor. Also, it doesn't rotate meaning that the javascript is not run. This happens roughly every third time - other times it works great.

To me, it looks like firefox tries to drag the whole svg-object instead of handing the mouse-events over to the javascript and let that do it's magic.

Does that sound familiar to anybody? What could I do?

Cheers!


Enclose your jquery code within a .ready function. Below is the code amended for jQuery noConflict mode.

jQuery(document).ready(function($) {
    function adjustIframes()
    {
      $('iframe').each(function(){
        var
        $this       = $(this),
        proportion  = $this.data( 'proportion' ),
        w           = $this.attr('width'),
        actual_w    = $this.width();

        if ( ! proportion )
        {
            proportion = $this.attr('height') / w;
            $this.data( 'proportion', proportion );
        }

        if ( actual_w != w )
        {
            $this.css( 'height', Math.round( actual_w * proportion ) + 'px' );
        }
      });
    }
    $(window).on('resize load',adjustIframes);

    // DOM ready
         $(function() {

          // Create the dropdown base
          $("<select />").appendTo("nav");

          // Create default option "Go to..."
          $("<option />", {
             "selected": "selected",
             "value"   : "",
             "text"    : "Go to..."
          }).appendTo("nav select");

          // Populate dropdown with menu items
          $("nav a").each(function() {
           var el = $(this);
           $("<option />", {
               "value"   : el.attr("href"),
               "text"    : el.text()
           }).appendTo("nav select");
          });

           // To make dropdown actually work
           // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
          $("nav select").change(function() {
            window.location = $(this).find("option:selected").val();
          });

         });

    if( document.createTouch ) {
        this.addEvent(c[j],'tap',this.tipOver,false);
    } else {
        this.addEvent(c[j],'mouseover',this.tipOver,false);
        this.addEvent(c[j],'mouseout',this.tipOut,false);
    }
});

Also please make sure you have included the jQuery file in the header of your wordpress theme.

4

1 に答える 1

1

さて、しばらくして、ウェブを検索しましたが、自分で答えを見つけました.

これは、Firefox の SVG 内でのドラッグ/選択と同じように機能します。

そこから引用させてください:

この動作は、次のバグ レポートで説明されています: https://bugzilla.mozilla.org/show_bug.cgi?id=525591 イベントで preventDefault() を呼び出すことで、これを修正できます。これは、どこかの FAQ に入れる必要があります。

追加するものは何もありません:-)

于 2012-09-20T07:22:11.667 に答える